@rancher/shell 3.0.8 → 3.0.9-rc.2

package/edit/autoscaling.horizontalpodautoscaler/index.vue

@@ -1,28 +1,53 @@
-<script>
+<script lang="ts">
 import CreateEditView from '@shell/mixins/create-edit-view';
 
-import CruResource from '@shell/components/CruResource';
+import CruResource from '@shell/components/CruResource.vue';
 import { LabeledInput } from '@components/Form/LabeledInput';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import Labels from '@shell/components/form/Labels';
-import Loading from '@shell/components/Loading';
-import NameNsDescription from '@shell/components/form/NameNsDescription';
-import Tab from '@shell/components/Tabbed/Tab';
+import LabeledSelect from '@shell/components/form/LabeledSelect.vue';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import Labels from '@shell/components/form/Labels.vue';
+import Loading from '@shell/components/Loading.vue';
+import NameNsDescription from '@shell/components/form/NameNsDescription.vue';
+import Tab from '@shell/components/Tabbed/Tab.vue';
 import Tabbed from '@shell/components/Tabbed';
-import MetricsRow from '@shell/edit/autoscaling.horizontalpodautoscaler/metrics-row';
-import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
-import { DEFAULT_RESOURCE_METRIC } from '@shell/edit/autoscaling.horizontalpodautoscaler/resource-metric';
+import MetricsRow from '@shell/edit/autoscaling.horizontalpodautoscaler/metrics-row.vue';
+import ArrayListGrouped from '@shell/components/form/ArrayListGrouped.vue';
+import { DEFAULT_RESOURCE_METRIC } from '@shell/edit/autoscaling.horizontalpodautoscaler/resource-metric.vue';
 import { Checkbox } from '@components/Form/Checkbox';
 
-import { API_SERVICE, SCALABLE_WORKLOAD_TYPES } from '@shell/config/types';
+import { API_SERVICE, SCALABLE_WORKLOAD_TYPES, WORKLOAD_KIND_TO_TYPE_MAPPING } from '@shell/config/types';
 import isEmpty from 'lodash/isEmpty';
 import find from 'lodash/find';
 import endsWith from 'lodash/endsWith';
-import { findBy } from '@shell/utils/array';
 import HpaScalingRule from '@shell/edit/autoscaling.horizontalpodautoscaler/hpa-scaling-rule.vue';
+import { ResourceLabeledSelectPaginateSettings, ResourceLabeledSelectSettings } from '@shell/types/components/resourceLabeledSelect';
+import { PaginationParam, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
 
 const RESOURCE_METRICS_API_GROUP = 'metrics.k8s.io';
 
+/**
+ * HPA spec.scaleTargetRef
+ */
+interface OBJECT_REFERENCE {
+  apiVersion: string;
+  kind: string;
+  name: string;
+}
+
+type Workload = any;
+
+/**
+ * Update to type OBJECT_REFERENCE which can be stored directly as scaleTargetRef
+ */
+const mapWorkload = (workload: Workload | OBJECT_REFERENCE): OBJECT_REFERENCE => {
+  return {
+    kind:       workload.kind,
+    name:       workload.metadata?.name || workload.name,
+    apiVersion: workload.apiVersion,
+  };
+};
+
 export default {
   name: 'CruHPA',
 
@@ -35,6 +60,7 @@ export default {
     CruResource,
     LabeledInput,
     LabeledSelect,
+    ResourceLabeledSelect,
     Labels,
     Loading,
     NameNsDescription,
@@ -57,41 +83,46 @@ export default {
     },
   },
 
-  fetch() {
-    const promises = [this.loadAPIServices(), this.loadWorkloads()];
-
-    return Promise.all(promises);
+  async fetch() {
+    await this.loadAPIServices();
   },
 
   data() {
-    return { defaultResourceMetric: DEFAULT_RESOURCE_METRIC };
+    const sharedSettings = {
+      labelSelectOptions: {
+        'get-option-label': (opt: Workload) => opt?.name,
+        'option-key':       'name',
+      },
+    };
+
+    const paginateSettings: ResourceLabeledSelectPaginateSettings = {
+      ...sharedSettings,
+      updateResources: (resources) => {
+        return resources.map(mapWorkload);
+      },
+      requestSettings: this.pageRequestSettings
+    };
+
+    const allSettings: ResourceLabeledSelectSettings = {
+      ...sharedSettings,
+      updateResources: this.mapWorkloads,
+    };
+
+    const scalableWorkloadType = WORKLOAD_KIND_TO_TYPE_MAPPING[this.value?.spec?.scaleTargetRef?.kind] || Object.values(SCALABLE_WORKLOAD_TYPES)[0];
+
+    return {
+      defaultResourceMetric: DEFAULT_RESOURCE_METRIC,
+      paginateSettings,
+      allSettings,
+      scalableWorkloadType,
+      scalableWorkloadTypes: Object.values(SCALABLE_WORKLOAD_TYPES).map((v) => ({ label: this.t(`typeLabel."${ v }"`, { count: 1 }), value: v })),
+    };
   },
 
   computed: {
     allMetrics() {
       return this.value?.spec?.metrics;
     },
-    allWorkloadsFiltered() {
-      return (
-        Object.values(SCALABLE_WORKLOAD_TYPES)
-          .flatMap((type) => this.$store.getters['cluster/all'](type))
-          .filter(
-            // Filter out anything that has an owner, which should probably be the one with the HPA
-            // For example ReplicaSets can be associated with a HPA (https://kubernetes.io/docs/concepts/workloads/controllers/replicaset/#replicaset-as-a-horizontal-pod-autoscaler-target)
-            // but wouldn't make sense if it's owned by a deployment
-            (wl) => wl.metadata.namespace === this.value.metadata.namespace && !wl.ownedByWorkload
-          )
-      );
-    },
-    allWorkloadsMapped() {
-      return this.allWorkloadsFiltered
-      // Update to type OBJECT_REFERENCE which can be stored directly as scaleTargetRef
-        .map((workload) => ({
-          kind:       workload.kind,
-          name:       workload.metadata.name,
-          apiVersion: workload.apiVersion,
-        }));
-    },
     allServices() {
       return this.$store.getters['cluster/all'](API_SERVICE);
     },
@@ -107,17 +138,13 @@ export default {
       );
     },
     selectedTargetRef() {
-      const { scaleTargetRef: { name } } = this.value.spec;
-      const { allWorkloadsFiltered } = this;
-      const match = findBy(allWorkloadsFiltered, 'metadata.name', name);
-
-      return match ?? null;
+      return this.value?.spec?.scaleTargetRef;
     },
     hasScaleDownRules: {
       get() {
         return !!this.value.spec.behavior?.scaleDown;
       },
-      set(hasScaleDownRules) {
+      set(hasScaleDownRules: boolean) {
         if (hasScaleDownRules) {
           if (!this.value.spec.behavior) {
             this.value.spec['behavior'] = {};
@@ -134,7 +161,7 @@ export default {
       get() {
         return !!this.value.spec.behavior?.scaleUp;
       },
-      set(hasScaleUpRules) {
+      set(hasScaleUpRules: boolean) {
         if (hasScaleUpRules) {
           if (!this.value.spec.behavior) {
             this.value.spec['behavior'] = {};
@@ -147,6 +174,12 @@ export default {
         }
       }
     },
+    /**
+     * Unique id that when changes resets the state used to show candidate targets
+     */
+    targetResetKey() {
+      return `${ this.value.metadata.namespace }/${ this.scalableWorkloadType }`;
+    }
   },
 
   created() {
@@ -171,16 +204,56 @@ export default {
         metrics: [{ ...this.defaultResourceMetric }]
       };
     },
-    async loadWorkloads() {
-      await Promise.all(
-        Object.values(SCALABLE_WORKLOAD_TYPES).map((type) => this.$store.dispatch('cluster/findAll', { type })
-        )
-      );
-    },
     async loadAPIServices() {
       await this.$store.dispatch('cluster/findAll', { type: API_SERVICE });
     },
+
+    /**
+     * Fn of type @PaginateTypeOverridesFn
+     */
+    pageRequestSettings(opts: LabelSelectPaginationFunctionOptions): LabelSelectPaginationFunctionOptions {
+      const { opts: { filter } } = opts;
+
+      const filters: PaginationParam[] = [
+        PaginationParamFilter.createSingleField({
+          field: 'metadata.namespace', value: this.value.metadata.namespace, equals: true
+        }),
+      ];
+
+      if (!!filter) {
+        filters.push( PaginationParamFilter.createSingleField({
+          field: 'metadata.name', value: filter, equals: true, exact: false
+        }));
+      }
+
+      return {
+        ...opts,
+        classify:         false,
+        groupByNamespace: false,
+        sort:             [{ asc: true, field: 'metadata.name' }],
+        filters
+      };
+    },
+
+    /**
+     * Update to type OBJECT_REFERENCE which can be stored directly as scaleTargetRef
+     */
+    mapWorkload(workload: Workload | OBJECT_REFERENCE): OBJECT_REFERENCE {
+      return mapWorkload(workload);
+    },
+
+    mapWorkloads(workloads: Workload[]) {
+      return workloads
+        .filter((w) => w.metadata.namespace === this.value.metadata.namespace)
+        .map(mapWorkload);
+    }
   },
+
+  watch: {
+    targetResetKey() {
+      delete this.value.spec.scaleTargetRef;
+    },
+  }
 };
 </script>
 
@@ -196,7 +269,7 @@ export default {
       :resource="value"
       :validation-passed="true"
       :errors="errors"
-      @error="(e) => (errors = e)"
+      @error="(e: any) => (errors = e)"
       @finish="save"
       @cancel="done"
     >
@@ -219,17 +292,24 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledSelect
+                v-model:value="scalableWorkloadType"
+                :options="scalableWorkloadTypes"
+                :mode="mode"
+                :label="t('hpa.workloadTab.targetReferenceType')"
+                :required="true"
+              />
+            </div>
+            <div class="col span-6">
+              <ResourceLabeledSelect
+                :key="targetResetKey"
                 v-model:value="value.spec.scaleTargetRef"
-                :get-option-label="(opt) => opt.name"
                 :mode="mode"
                 :label="t('hpa.workloadTab.targetReference')"
-                :options="allWorkloadsMapped"
                 :required="true"
-              >
-                <template v-slot:option="option">
-                  {{ option.name }}<span class="pull-right">{{ option.kind }}</span>
-                </template>
-              </LabeledSelect>
+                :resource-type="scalableWorkloadType"
+                :paginated-resource-settings="paginateSettings"
+                :all-resources-settings="allSettings"
+              />
             </div>
           </div>
           <div class="row">
@@ -282,6 +362,7 @@ export default {
                 :mode="mode"
                 :metrics-available="resourceMetricsAvailable"
                 :referent="selectedTargetRef"
+                :namespace="value.metadata.namespace"
               />
             </template>
           </ArrayListGrouped>

package/edit/autoscaling.horizontalpodautoscaler/metrics-row.vue

@@ -8,6 +8,7 @@ import ObjectMetric, { DEFAULT_OBJECT_METRIC } from '@shell/edit/autoscaling.hor
 import PodMetric, { DEFAULT_POD_METRIC } from '@shell/edit/autoscaling.horizontalpodautoscaler/pod-metric';
 import ResourceMetric, { DEFAULT_RESOURCE_METRIC } from '@shell/edit/autoscaling.horizontalpodautoscaler/resource-metric';
 import { Banner } from '@components/Banner';
+import { WORKLOAD_KIND_TO_TYPE_MAPPING } from '@shell/config/types';
 
 const METRIC_TYPES = {
   external: { label: 'External' },
@@ -28,9 +29,15 @@ export default {
 
   props: {
     referent: {
-      type:    Object,
-      default: () => ({}),
+      type:    String,
+      default: undefined,
+    },
+
+    namespace: {
+      type:    String,
+      default: undefined,
     },
+
     value: {
       type:    Object,
       default: () => ({}),
@@ -51,6 +58,7 @@ export default {
     return {
       metricOptions: values(METRIC_TYPES),
       metricTypes:   METRIC_TYPES,
+      referentObj:   null,
     };
   },
 
@@ -68,10 +76,10 @@ export default {
       return this.checkSpecType('external');
     },
     showReferentWarning() {
-      const { referent } = this;
+      const { referentObj } = this;
 
-      if (!isEmpty(referent)) {
-        const containerRequests = referent.spec?.containers?.[0]?.resources?.requests;
+      if (!isEmpty(referentObj)) {
+        const containerRequests = referentObj.spec?.containers?.[0]?.resources?.requests;
 
         if (containerRequests && !containerRequests[this.value.name]) {
           return false;
@@ -117,6 +125,34 @@ export default {
         delete this.value[oldType.toLowerCase()];
       }
     },
+
+    referent: {
+      async handler() {
+        if (this.referent && this.namespace) {
+          const { name, kind } = this.referent;
+
+          if (name && kind) {
+            const type = WORKLOAD_KIND_TO_TYPE_MAPPING[kind];
+            const id = `${ this.namespace }/${ name }`;
+
+            if (type) {
+            // Use `find` in case the result we want is not in the drop down set of options... which means it won't initially be in the cache
+            // Use `transient` to not pollute the cache
+              const match = await this.$store.dispatch('cluster/find', {
+                type, id, transient: true
+              });
+
+              this.referentObj = match;
+
+              return;
+            }
+          }
+        }
+
+        this.referentObj = null;
+      },
+      immediate: true
+    }
   },
 
   methods: {

package/edit/projectsecret.vue

@@ -0,0 +1,29 @@
+<script>
+/**
+ * ProjectSecretProxy
+ *
+ * This component acts as a bridge to allow the "Project Secrets" sidebar item to be highlighted correctly
+ * while reusing the standard Secret creation/editing logic.
+ *
+ * How it works:
+ * 1. The Sidebar logic highlights items based on the current route's resource (e.g., /explorer/projectsecret/...).
+ * 2. The ResourceDetail loader looks for an edit component matching the resource name (shell/edit/projectsecret.vue).
+ * 3. Without this file, the loader falls back to the default YAML editor.
+ * 4. We cannot globally alias 'projectsecret' to 'secret' via `componentForType` because that would also
+ *    redirect the List View to the generic Secret list, breaking the Project Secrets list logic.
+ *
+ * Therefore, this file exists solely to satisfy the component lookup for the Edit/Create view
+ * and pass control to the standard Secret component.
+ */
+import Secret from '@shell/edit/secret/index.vue';
+
+export default {
+  name:         'ProjectSecretProxy',
+  components:   { Secret },
+  inheritAttrs: false,
+};
+</script>
+
+<template>
+  <Secret v-bind="$attrs" />
+</template>