@rancher/shell 0.5.3 → 2.0.0

package/components/form/ResourceLabeledSelect.vue

@@ -0,0 +1,187 @@
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { labelSelectPaginationFunction, LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
+import { LabelSelectPaginateFn, LabelSelectPaginateFnOptions, LabelSelectPaginateFnResponse } from '@shell/types/components/labeledSelect';
+
+type PaginateTypeOverridesFn = (opts: LabelSelectPaginationFunctionOptions) => LabelSelectPaginationFunctionOptions;
+
+interface SharedSettings {
+  /**
+   * Provide specific LabelSelect options for this mode (paginated / not paginated)
+   */
+  labelSelectOptions?: { [key: string]: any },
+  /**
+   * Map the resources shown in LabelSelect
+   */
+  mapResult?: (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
+   */
+  overrideRequest?: LabelSelectPaginateFn,
+  /**
+   * Override the default settings used in the convience function to fetch a page of results
+   */
+  requestSettings?: PaginateTypeOverridesFn,
+}
+
+/**
+ * Settings to use when the LabelSelect is fetching all resources (not paginating)
+ */
+export type ResourceLabeledSelectSettings = SharedSettings
+
+/**
+ * Force a specific mode
+ */
+export enum RESOURCE_LABEL_SELECT_MODE {
+  /**
+   * Fetch all resources
+   */
+  ALL_RESOURCES = 'ALL', // eslint-disable-line no-unused-vars
+  /**
+   * Determine if all resources are fetched given system settings
+   */
+  DYNAMIC = 'DYNAMIC', // eslint-disable-line no-unused-vars
+}
+
+/**
+ * Convience wrapper around the LabelSelect component to support pagination
+ *
+ * Handles
+ *
+ * 1) Conditionally enabling the pagination feature given system settings
+ * 2) Helper function to fetch the pagination result
+ *
+ * A number of ways can be provided to override the convienences (see props)
+ */
+export default defineComponent({
+  name: 'ResourceLabeledSelect',
+
+  components: { LabeledSelect },
+
+  props: {
+    /**
+     * Resource to show
+     */
+    resourceType: {
+      type:     String,
+      required: true
+    },
+
+    inStore: {
+      type:    String,
+      default: 'cluster',
+    },
+
+    /**
+     * Determine if pagination is used via settings (DYNAMIC) or hardcode off
+     */
+    paginateMode: {
+      type:    String as PropType<RESOURCE_LABEL_SELECT_MODE>,
+      default: RESOURCE_LABEL_SELECT_MODE.DYNAMIC,
+    },
+
+    /**
+     * Specific settings to use when we're showing all results
+     */
+    allResourcesSettings: {
+      type:    Object as PropType<ResourceLabeledSelectSettings>,
+      default: null,
+    },
+
+    /**
+     * Specific settings to use when we're showing paginated results
+     */
+    paginatedResourceSettings: {
+      type:    Object as PropType<ResourceLabeledSelectPaginateSettings>,
+      default: null,
+    },
+  },
+
+  data() {
+    return { paginate: false };
+  },
+
+  async fetch() {
+    switch (this.paginateMode) {
+    case RESOURCE_LABEL_SELECT_MODE.ALL_RESOURCES:
+      this.paginate = false;
+      break;
+    case RESOURCE_LABEL_SELECT_MODE.DYNAMIC:
+      this.paginate = this.$store.getters[`${ this.inStore }/paginationEnabled`](this.resourceType);
+      break;
+    }
+
+    if (!this.paginate) {
+      await this.$store.dispatch(`${ this.inStore }/findAll`, { type: this.resourceType });
+    }
+  },
+
+  computed: {
+    labelSelectAttributes() {
+      return this.paginate ? {
+        ...this.$attrs,
+        ...this.paginatedResourceSettings?.labelSelectOptions || {}
+      } : {
+        ...this.$attrs,
+        ...this.allResourcesSettings?.labelSelectOptions || {}
+      };
+    },
+
+    allOfType() {
+      if (this.$fetchState.pending || this.paginate) {
+        return [];
+      }
+
+      const all = this.$store.getters[`${ this.inStore }/all`](this.resourceType);
+
+      return this.allResourcesSettings?.mapResult ? this.allResourcesSettings.mapResult(all) : all;
+    }
+  },
+
+  methods: {
+    /**
+     * Typeof LabelSelectPaginateFn
+     */
+    async paginateType(opts: LabelSelectPaginateFnOptions): Promise<LabelSelectPaginateFnResponse> {
+      if (this.paginatedResourceSettings?.overrideRequest) {
+        return await this.paginatedResourceSettings.overrideRequest(opts);
+      }
+
+      const { filter } = opts;
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+      const defaultOptions: LabelSelectPaginationFunctionOptions = {
+        opts,
+        filters,
+        type: this.resourceType,
+        ctx:  { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        sort: [{ asc: true, field: 'metadata.name' }],
+      };
+      const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
+      const res = await labelSelectPaginationFunction(options);
+
+      return this.paginatedResourceSettings?.mapResult ? {
+        ...res,
+        page: this.paginatedResourceSettings.mapResult(res.page)
+      } : res;
+    },
+  },
+});
+</script>
+
+<template>
+  <LabeledSelect
+    v-bind="labelSelectAttributes"
+    :loading="$fetchState.pending"
+    :options="allOfType"
+    :paginate="paginateType"
+    v-on="$listeners"
+  />
+</template>

package/components/form/ResourceTabs/index.vue

@@ -73,11 +73,13 @@ export default {
     const inStore = this.$store.getters['currentStore'](EVENT);
 
     return {
-      hasEvents:     this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
-      allEvents:     [],
-      selectedTab:   this.defaultTab,
-      didLoadEvents: false,
-      extensionTabs: getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
+      hasEvents:      this.$store.getters[`${ inStore }/schemaFor`](EVENT), // @TODO be smarter about which resources actually ever have events
+      allEvents:      [],
+      selectedTab:    this.defaultTab,
+      didLoadEvents:  false,
+      extensionTabs:  getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.RESOURCE_DETAIL, this.$route, this, this.extensionParams),
+      inStore,
+      showConditions: false,
     };
   },
 
@@ -85,16 +87,13 @@ export default {
     this.$store.dispatch('cluster/forgetType', EVENT);
   },
 
-  computed: {
-    showConditions() {
-      const inStore = this.$store.getters['currentStore'](this.value.type);
-
-      if ( this.$store.getters[`${ inStore }/schemaFor`](this.value.type) ) {
-        return this.isView && this.needConditions && this.value?.type && this.$store.getters[`${ inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
-      }
+  fetch() {
+    // By this stage the `value` should be set. Taking a chance that this is true
+    // The alternative is have an expensive watch on the `value` and trigger there (as well)
+    this.setShowConditions();
+  },
 
-      return false;
-    },
+  computed: {
     showEvents() {
       return this.isView && this.needEvents && this.hasEvents;
     },
@@ -166,7 +165,24 @@ export default {
           this.didLoadEvents = true;
         });
       }
-    }
+    },
+
+    /**
+    * Conditions come from a resource's `status`. They are used by both core resources like workloads as well as those from CRDs
+    * - Workloads
+    * - Nodes
+    * - Fleet git repo
+    * - Cluster (provisioning)
+    *
+    * Check here if the resource type contains conditions via the schema resourceFields
+    */
+    async setShowConditions() {
+      if (this.isView && this.needConditions && !!this.value?.type && !!this.schema?.fetchResourceFields) {
+        await this.schema.fetchResourceFields();
+
+        this.showConditions = this.$store.getters[`${ this.inStore }/pathExistsInSchema`](this.value.type, 'status.conditions');
+      }
+    },
   }
 };
 </script>

package/components/form/SecretSelector.vue

@@ -1,14 +1,16 @@
 <script>
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect';
 import { SECRET } from '@shell/config/types';
 import { _EDIT, _VIEW } from '@shell/config/query-params';
 import { SECRET_TYPES as TYPES } from '@shell/config/secret';
-import sortBy from 'lodash/sortBy';
+import { PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { LABEL_SELECT_KINDS } from '@shell/types/components/labeledSelect';
 
 const NONE = '__[[NONE]]__';
 
 export default {
-  components: { LabeledSelect },
+  components: { LabeledSelect, ResourceLabeledSelect },
 
   props: {
     value: {
@@ -62,6 +64,33 @@ export default {
     }
   },
 
+  data() {
+    return {
+      secrets:            null,
+      SECRET,
+      allSecretsSettings: {
+        mapResult: (secrets) => {
+          const allSecretsInNamespace = secrets.filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
+          const mappedSecrets = this.mapSecrets(allSecretsInNamespace.sort((a, b) => a.name.localeCompare(b.name)));
+
+          this.secrets = allSecretsInNamespace; // We need the key from the selected secret
+
+          return mappedSecrets;
+        }
+      },
+      paginateSecretsSetting: {
+        requestSettings: this.paginatePageOptions,
+        mapResult:       (secrets) => {
+          const mappedSecrets = this.mapSecrets(secrets);
+
+          this.secrets = secrets; // We need the key from the selected secret. When paginating we won't touch the store, so just pass back here
+
+          return mappedSecrets;
+        }
+      }
+    };
+  },
+
   computed: {
     name: {
       get() {
@@ -89,36 +118,77 @@ export default {
         this.$emit('input', { [this.mountKey]: { secretKeyRef: { [this.nameKey]: this.name, [this.keyKey]: key } } });
       }
     },
-    secrets() {
-      const allSecrets = this.$store.getters[`${ this.inStore }/all`](SECRET);
 
-      return allSecrets
-        .filter((secret) => this.types.includes(secret._type) && secret.namespace === this.namespace);
-    },
-    secretNames() {
-      const mappedSecrets = this.secrets.map((secret) => ({
-        label: secret.name,
-        value: secret.name
-      })).sort();
-
-      return [{ label: 'None', value: NONE }, ...sortBy(mappedSecrets, 'label')];
-    },
     keys() {
-      const secret = this.secrets.find((secret) => secret.name === this.name) || {};
+      const secret = (this.secrets || []).find((secret) => secret.name === this.name) || {};
 
       return Object.keys(secret.data || {}).map((key) => ({
         label: key,
         value: key
       }));
     },
+
     isView() {
       return this.mode === _VIEW;
     },
+
     isKeyDisabled() {
       return !this.isView && (!this.name || this.name === NONE || this.disabled);
     }
   },
 
+  methods: {
+    /**
+     * Provide a set of options for the LabelSelect ([none, ...{label, value}])
+     */
+    mapSecrets(secrets) {
+      const mappedSecrets = secrets
+        .reduce((res, s) => {
+          if (s.kind === LABEL_SELECT_KINDS.NONE) {
+            return res;
+          }
+
+          if (s.id) {
+            res.push({ label: s.name, value: s.name });
+          } else {
+            res.push(s);
+          }
+
+          return res;
+        }, []);
+
+      return [
+        {
+          label: 'None', value: NONE, kind: LABEL_SELECT_KINDS.NONE
+        },
+        ...mappedSecrets
+      ];
+    },
+
+    /**
+     * @param [LabelSelectPaginationFunctionOptions] opts
+     * @returns LabelSelectPaginationFunctionOptions
+     */
+    paginatePageOptions(opts) {
+      const { opts: { filter } } = opts;
+
+      const filters = !!filter ? [PaginationParamFilter.createSingleField({ field: 'metadata.name', value: filter })] : [];
+
+      filters.push(
+        PaginationParamFilter.createSingleField({ field: 'metadata.namespace', value: this.namespace }),
+        PaginationParamFilter.createSingleField({ field: 'metadata.fields.1', value: this.types.join(',') })
+      );
+
+      return {
+        ...opts,
+        filters,
+        groupByNamespace: false,
+        classify:         true,
+        sort:             [{ asc: true, field: 'metadata.name' }],
+      };
+    },
+  }
+
 };
 </script>
 
@@ -128,12 +198,17 @@ export default {
     :class="{'show-key-selector': showKeySelector}"
   >
     <div class="input-container">
-      <LabeledSelect
+      <!-- key by namespace to ensure label select current page is recreated on ns change -->
+      <ResourceLabeledSelect
+        :key="namespace"
         v-model="name"
         :disabled="!isView && disabled"
-        :options="secretNames"
         :label="secretNameLabel"
         :mode="mode"
+        :resource-type="SECRET"
+        :in-store="inStore"
+        :paginated-resource-settings="paginateSecretsSetting"
+        :all-resources-settings="allSecretsSettings"
       />
       <LabeledSelect
         v-if="showKeySelector"

package/components/form/Select.vue

@@ -246,7 +246,7 @@ export default {
     >
       <template #option="option">
         <div @mousedown="(e) => onClickOption(option, e)">
-          {{ option.label }}
+          {{ getOptionLabel(option.label) }}
         </div>
       </template>
       <!-- Pass down templates provided by the caller -->