Remove usages of findAll for core resources in cluster explorer view - 1

shell/components/Questions/Reference.vue

@@ -1,7 +1,8 @@
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import { filterBy } from '@shell/utils/array';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+
 import { PVC, STORAGE_CLASS } from '@shell/config/types';
 import Question from './Question';
 
@@ -14,7 +15,7 @@ const LEGACY_MAP = {
 export default {
   emits: ['update:value'],
 
-  components: { LabeledInput, LabeledSelect },
+  components: { LabeledInput, ResourceLabeledSelect },
   mixins:     [Question],
 
   props: {
@@ -29,12 +30,6 @@ export default {
     },
   },
 
-  async fetch() {
-    if ( this.typeSchema ) {
-      this.all = await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.typeName });
-    }
-  },
-
   data() {
     const t = this.question.type;
 
@@ -57,29 +52,61 @@ export default {
     return {
       typeName,
       typeSchema,
-      all: [],
+      all:                 [],
+      allResourceSettings: {
+        updateResources: (all) => {
+          // Filter to only include required namespaced resources
+          const resources = this.isNamespaced ? all.filter((r) => r.metadata.namespace === this.targetNamespace) : all;
+
+          return this.mapResourcesToOptions(resources);
+        }
+      },
+      paginateResourceSetting: {
+        updateResources: (resources) => {
+          return this.mapResourcesToOptions(resources);
+        },
+        /**
+          * of type PaginateTypeOverridesFn
+          * @param [LabelSelectPaginationFunctionOptions] opts
+          * @returns LabelSelectPaginationFunctionOptions
+         */
+        requestSettings: (opts) => {
+          // Filter to only include required namespaced resources
+          const filters = this.isNamespaced ? [
+            PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.targetNamespace }),
+          ] : [];
+
+          return {
+            ...opts,
+            filters,
+            groupByNamespace: false,
+            classify:         true,
+          };
+        }
+      },
     };
   },
 
+  methods: {
+    mapResourcesToOptions(resources) {
+      return resources.map((r) => {
+        if (r.id) {
+          return {
+            label: r.nameDisplay || r.metadata.name,
+            value: r.metadata.name
+          };
+        } else {
+          return r;
+        }
+      });
+    },
+
+  },
+
   computed: {
     isNamespaced() {
       return !!this.typeSchema?.attributes?.namespaced;
     },
-
-    options() {
-      let out = this.all;
-
-      if ( this.isNamespaced ) {
-        out = filterBy(this.all, 'metadata.namespace', this.targetNamespace);
-      }
-
-      return out.map((x) => {
-        return {
-          label: x.nameDisplay || x.metadata.name,
-          value: x.metadata.name
-        };
-      });
-    }
   },
 };
 </script>
@@ -90,15 +117,17 @@ export default {
     class="row"
   >
     <div class="col span-6">
-      <LabeledSelect
-        :mode="mode"
-        :options="options"
+      <ResourceLabeledSelect
+        :resourceType="typeName"
+        :inStore="inStore"
         :disabled="$fetchState.pending || disabled"
         :label="displayLabel"
         :placeholder="question.description"
         :required="question.required"
         :value="value"
         :tooltip="displayTooltip"
+        :paginated-resource-settings="paginateResourceSetting"
+        :all-resources-settings="allResourceSettings"
         @update:value="!$fetchState.pending && $emit('update:value', $event)"
       />
     </div>

shell/components/form/LabeledSelect.vue

@@ -383,7 +383,7 @@ export default {
 
       <template #list-footer>
         <div
-          v-if="canPaginate && totalResults"
+          v-if="canPaginate && totalResults && pages > 1"
           class="pagination-slot"
         >
           <div class="load-more">

shell/components/form/ResourceLabeledSelect.vue

@@ -13,17 +13,17 @@ interface SharedSettings {
    */
   labelSelectOptions?: { [key: string]: any },
   /**
-   * Map the resources shown in LabelSelect
+   * Map, filter, tweak, etc the resources to show in the LabelSelect
    */
-  mapResult?: (resources: any[]) => any[]
+  updateResources?: (resources: any[]) => any[]
 }
 
 /**
  * Settings to use when the LabelSelect is paginating
  */
 export interface ResourceLabeledSelectPaginateSettings extends SharedSettings {
   /**
-   * Override the convience function which fetches a page of results
+   * Override the convenience function which fetches a page of results
    */
   overrideRequest?: LabelSelectPaginateFn,
   /**
@@ -66,6 +66,8 @@ export default defineComponent({
 
   components: { LabeledSelect },
 
+  emits: ['update:value'],
+
   props: {
     /**
      * Resource to show
@@ -120,6 +122,7 @@ export default defineComponent({
     }
 
     if (!this.paginate) {
+      // The resource won't be paginated and component expects everything up front
       await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
     }
   },
@@ -148,13 +151,14 @@ export default defineComponent({
 
       const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
 
-      return this.allResourcesSettings?.mapResult ? this.allResourcesSettings.mapResult(all) : all;
+      return this.allResourcesSettings?.updateResources ? this.allResourcesSettings.updateResources(all) : all;
     }
   },
 
   methods: {
     /**
-     * Typeof LabelSelectPaginateFn
+     * Make the request to fetch the resource given the state of the label select (filter, page, page size, etc see LabelSelectPaginateFn)
+     * opts: Typeof LabelSelectPaginateFn
      */
     async paginateType(opts: LabelSelectPaginateFnOptions): Promise<LabelSelectPaginateFnResponse> {
       if (this.paginatedResourceSettings?.overrideRequest) {
@@ -175,9 +179,9 @@ export default defineComponent({
       const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
       const res = await labelSelectPaginationFunction(options);
 
-      return this.paginatedResourceSettings?.mapResult ? {
+      return this.paginatedResourceSettings?.updateResources ? {
         ...res,
-        page: this.paginatedResourceSettings.mapResult(res.page)
+        page: this.paginatedResourceSettings.updateResources(res.page)
       } : res;
     },
   },
@@ -190,5 +194,6 @@ export default defineComponent({
     :loading="$fetchState.pending"
     :options="allOfType"
     :paginate="paginateType"
+    @update:value="$emit('update:value', $event)"
   />
 </template>

shell/components/form/ResourceSelector.vue

@@ -36,6 +36,7 @@ export default {
   },
 
   async fetch() {
+    // Used in conjunction with `matches/match/label selectors`. Requires https://github.com/rancher/dashboard/issues/10417 to fix
     const hash = await allHash({ allResources: this.$store.dispatch('cluster/findAll', { type: this.type }) });
 
     this.allResources = hash.allResources;