@rancher/shell 3.0.9-rc.5 → 3.0.9-rc.6

package/components/form/NodeScheduling.vue

@@ -1,17 +1,24 @@
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex';
 import { RadioGroup } from '@components/Form/Radio';
-import LabeledSelect from '@shell/components/form/LabeledSelect';
-import NodeAffinity from '@shell/components/form/NodeAffinity';
+import ResourceLabeledSelect from '@shell/components/form/ResourceLabeledSelect.vue';
+import NodeAffinity from '@shell/components/form/NodeAffinity.vue';
 import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import { _VIEW } from '@shell/config/query-params';
 import { isEmpty } from '@shell/utils/object';
 import { HOSTNAME } from '@shell/config/labels-annotations';
+import { ResourceLabeledSelectPaginateSettings, ResourceLabeledSelectSettings } from '@shell/types/components/resourceLabeledSelect';
+import { NODE } from '@shell/config/types';
+import { LabelSelectPaginationFunctionOptions } from '@shell/components/form/labeled-select-utils/labeled-select.utils';
+import { PaginationFilterEquality, PaginationParamFilter } from '@shell/types/store/pagination.types';
+import { KubeNode, KubeNodeTaint } from '@shell/types/resources/node';
+
+const parseNode = (node: string | KubeNode) => typeof node === 'string' ? node : node.id;
 
 export default {
   components: {
     RadioGroup,
-    LabeledSelect,
+    ResourceLabeledSelect,
     NodeAffinity,
   },
 
@@ -23,6 +30,9 @@ export default {
       }
     },
 
+    /**
+     * HARVESTER ONLY PROPERTY
+     */
     nodes: {
       type:    Array,
       default: () => []
@@ -39,12 +49,71 @@ export default {
     },
   },
 
-  data() {
+  data(): {
+    selectNode: string | null;
+    nodeName: string;
+    nodeAffinity: any;
+    nodeSelector: any;
+    nodeSchedulingAllSettings: ResourceLabeledSelectSettings;
+    nodeSchedulingPaginationSettings: ResourceLabeledSelectPaginateSettings;
+    NODE: string;
+    } {
+    const keys = [
+      `node-role.kubernetes.io/control-plane`,
+      `node-role.kubernetes.io/etcd`
+    ];
+
+    // Settings used by ResourceLabeledSelect when node pagination disabled
+    const nodeSchedulingAllSettings: ResourceLabeledSelectSettings = {
+      updateResources(nodes: (string | KubeNode)[]) {
+        return nodes
+          .filter((node) => {
+            if (typeof node === 'string') {
+              // Already passed check
+              return true;
+            }
+
+            const taints = node.spec?.taints || [];
+
+            return taints.every((taint: KubeNodeTaint) => !keys.includes(taint.key));
+          })
+          .map(parseNode);
+      },
+    };
+
+    // Settings used by ResourceLabeledSelect when node pagination enabled
+    const nodeSchedulingPaginationSettings: ResourceLabeledSelectPaginateSettings = {
+      updateResources(nodes: (string | KubeNode)[]) {
+        return nodes.map(parseNode);
+      },
+      requestSettings: (opts: LabelSelectPaginationFunctionOptions) => {
+        const { filter } = opts.opts;
+        const filters = !!filter ? [
+          PaginationParamFilter.createSingleField({
+            field: 'metadata.name', value: filter, exact: false
+          })
+        ] : [];
+
+        filters.push(...keys.map((k) => PaginationParamFilter.createSingleField( ({
+          field: 'spec.taints.key', value: k, equality: PaginationFilterEquality.NOT_CONTAINS
+        }))));
+
+        opts.filters = filters;
+        opts.groupByNamespace = false;
+        opts.sort = [{ asc: true, field: 'metadata.name' }];
+
+        return opts;
+      }
+    };
+
     return {
       selectNode:   null,
       nodeName:     '',
       nodeAffinity: {},
       nodeSelector: {},
+      nodeSchedulingAllSettings,
+      nodeSchedulingPaginationSettings,
+      NODE
     };
   },
 
@@ -147,6 +216,9 @@ export default {
   watch: {
     'value.nodeSelector': {
       handler(nodeSelector) {
+        // Harvester specific code should not live in rancher/dashboard components
+        // This was brought into harvester/dashboard via https://github.com/harvester/dashboard/pull/342
+        // rancher/dashboard via https://github.com/rancher/dashboard/pull/6310
         if (this.isHarvester && nodeSelector?.[HOSTNAME]) {
           this.selectNode = 'nodeSelector';
           const nodeName = nodeSelector[HOSTNAME];
@@ -187,14 +259,16 @@ export default {
     <template v-if="selectNode === 'nodeSelector'">
       <div class="row">
         <div class="col span-6">
-          <LabeledSelect
+          <ResourceLabeledSelect
             v-model:value="nodeName"
             :label="t('workload.scheduling.affinity.nodeName')"
-            :options="nodes || []"
+            :resource-type="NODE"
             :mode="mode"
             :multiple="false"
             :loading="loading"
             :data-testid="'node-scheduling-nodeSelector'"
+            :allResourcesSettings="nodeSchedulingAllSettings"
+            :paginatedResourceSettings="nodeSchedulingPaginationSettings"
             @update:value="update"
           />
         </div>

package/components/form/PodAffinity.vue

@@ -2,7 +2,7 @@
 import { mapGetters } from 'vuex';
 import { _VIEW } from '@shell/config/query-params';
 import { get, set, isEmpty, clone } from '@shell/utils/object';
-import { POD, NODE, NAMESPACE } from '@shell/config/types';
+import { POD, NAMESPACE } from '@shell/config/types';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { RadioGroup } from '@components/Form/Radio';
@@ -11,7 +11,6 @@ import { randomStr } from '@shell/utils/string';
 import { sortBy } from '@shell/utils/sort';
 import debounce from 'lodash/debounce';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
-import { getUniqueLabelKeys } from '@shell/utils/array';
 
 const NAMESPACE_SELECTION_OPTION_VALUES = {
   POD:      'pod',
@@ -47,11 +46,6 @@ export default {
       default: 'create'
     },
 
-    nodes: {
-      type:    Array,
-      default: () => []
-    },
-
     namespaces: {
       type:    Array,
       default: null
@@ -110,10 +104,6 @@ export default {
       return POD;
     },
 
-    node() {
-      return NODE;
-    },
-
     labeledInputNamespaceLabel() {
       return this.removeLabeledInputNamespaceLabel ? '' : this.overwriteLabels?.namespaceInputLabel || this.t('workload.scheduling.affinity.matchExpressions.inNamespaces');
     },
@@ -132,14 +122,6 @@ export default {
       return out;
     },
 
-    existingNodeLabels() {
-      return getUniqueLabelKeys(this.nodes);
-    },
-
-    hasNodes() {
-      return this.nodes.length;
-    },
-
     namespaceSelectionOptions() {
       if (this.allNamespacesOptionAvailable) {
         return [
@@ -440,24 +422,7 @@ export default {
           />
           <div class="row mt-20">
             <div class="col span-9">
-              <LabeledSelect
-                v-if="hasNodes"
-                v-model:value="props.row.value.topologyKey"
-                :taggable="true"
-                :searchable="true"
-                :close-on-select="false"
-                :mode="mode"
-                required
-                :label="t('workload.scheduling.affinity.topologyKey.label')"
-                :placeholder="topologyKeyPlaceholder"
-                :options="existingNodeLabels"
-                :disabled="mode==='view'"
-                :loading="loading"
-                :data-testid="`pod-affinity-topology-select-index${props.i}`"
-                @update:value="update"
-              />
               <LabeledInput
-                v-else
                 v-model:value="props.row.value.topologyKey"
                 :mode="mode"
                 :label="t('workload.scheduling.affinity.topologyKey.label')"

package/components/form/ResourceLabeledSelect.vue

@@ -137,13 +137,17 @@ export default defineComponent({
       const filters = !!filter ? [PaginationParamFilter.createSingleField({
         field: 'metadata.name', value: filter, exact: false
       })] : [];
+      const schema = this.$store.getters[`${ this.validInStore }/schema`](this.resourceType);
+      const namespaced = typeof schema?.attributes?.namespaced !== 'undefined' ? schema.attributes.namespaced : false;
+
       const defaultOptions: LabelSelectPaginationFunctionOptions = {
         opts,
         filters,
-        type:  this.resourceType,
-        ctx:   { getters: this.$store.getters, dispatch: this.$store.dispatch },
-        sort:  [{ asc: true, field: 'metadata.name' }],
-        store: this.validInStore
+        type:             this.resourceType,
+        ctx:              { getters: this.$store.getters, dispatch: this.$store.dispatch },
+        sort:             [{ asc: true, field: 'metadata.name' }],
+        store:            this.validInStore,
+        groupByNamespace: namespaced,
       };
       const options = this.paginatedResourceSettings?.requestSettings ? this.paginatedResourceSettings.requestSettings(defaultOptions) : defaultOptions;
       const res = await labelSelectPaginationFunction(options);

package/components/form/ResourceQuota/Namespace.vue

@@ -35,11 +35,11 @@ export default {
   computed: {
     ...QUOTA_COMPUTED,
     projectResourceQuotaLimits() {
-      return this.project?.spec?.resourceQuota?.limit || {};
+      return this.flatListFromLimits(this.project?.spec?.resourceQuota?.limit || {});
     },
     namespaceResourceQuotaLimits() {
       return this.project.namespaces.map((namespace) => ({
-        ...namespace.resourceQuota.limit,
+        ...this.flatListFromLimits(namespace.resourceQuota.limit),
         id: namespace.id
       }));
     },
@@ -47,7 +47,7 @@ export default {
       return Object.keys(this.projectResourceQuotaLimits);
     },
     defaultResourceQuotaLimits() {
-      return this.project.spec.namespaceDefaultResourceQuota.limit;
+      return this.flatListFromLimits(this.project.spec.namespaceDefaultResourceQuota.limit || {});
     }
   },
 
@@ -57,14 +57,35 @@ export default {
         .filter((type) => !this.types.includes(type.value) || type.value === currentType);
     },
     update(key, value) {
-      const resourceQuota = {
-        limit: {
-          ...this.value.resourceQuota.limit,
-          [key]: value
+      this.value['resourceQuota'] = { limit: this.limitsFromFlatList(key, value) };
+    },
+    flatListFromLimits(limit) {
+      const result = {};
+
+      Object.keys(limit || {}).forEach((key) => {
+        if (key === 'extended') {
+          Object.keys(limit.extended || {}).forEach((extKey) => {
+            result[`extended.${ extKey }`] = limit.extended[extKey];
+          });
+        } else {
+          result[key] = limit[key];
         }
-      };
+      });
+
+      return result;
+    },
+    limitsFromFlatList(key, value) {
+      const limit = { ...this.value.resourceQuota.limit };
+
+      if (key.startsWith('extended.')) {
+        const resourceIdentifier = key.slice('extended.'.length);
+
+        limit.extended = { ...(limit.extended || {}), [resourceIdentifier]: value };
+      } else {
+        limit[key] = value;
+      }
 
-      this.value['resourceQuota'] = resourceQuota;
+      return limit;
     }
   },
 };

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -61,17 +61,35 @@ export default {
     // We want to update the value first so that the value will be rounded to the project limit.
     // This is relevant when switching projects. If the value is 1200 and the project that it was
     // switched to only has capacity for 800 more this will force the value to be set to 800.
-    if (this.value?.limit?.[this.type]) {
-      this.update(this.value.limit[this.type]);
+    if (this.currentLimit) {
+      this.update(this.currentLimit);
     }
 
-    if (!this.value?.limit?.[this.type]) {
+    if (!this.currentLimit) {
       this.update(this.defaultResourceQuotaLimits[this.type]);
     }
   },
 
   computed: {
     ...ROW_COMPUTED,
+    currentLimit() {
+      const limit = this.value.limit || {};
+
+      if (this.type.startsWith('extended.')) {
+        const resourceIdentifier = this.type.slice('extended.'.length);
+
+        return (limit.extended || {})[resourceIdentifier];
+      }
+
+      return limit[this.type];
+    },
+    displayType() {
+      if (this.type.startsWith('extended.')) {
+        return this.type.slice('extended.'.length);
+      }
+
+      return this.type;
+    },
     limitValue() {
       return parseSi(this.projectResourceQuotaLimits[this.type]);
     },
@@ -92,7 +110,7 @@ export default {
       return this.namespaceLimits.reduce((sum, limit) => sum + limit, 0);
     },
     totalContribution() {
-      return this.namespaceContribution + parseSi(this.value.limit[this.type] || '0', this.siOptions);
+      return this.namespaceContribution + parseSi(this.currentLimit || '0', this.siOptions);
     },
     percentageUsed() {
       return Math.min(this.totalContribution * 100 / this.projectLimit, 100);
@@ -127,7 +145,7 @@ export default {
         },
         {
           label: t('resourceQuota.tooltip.namespace'),
-          value: this.value.limit[this.type]
+          value: this.currentLimit
         },
         {
           label: t('resourceQuota.tooltip.available'),
@@ -178,7 +196,7 @@ export default {
     <Select
       class="mr-10"
       :mode="mode"
-      :value="type"
+      :value="displayType"
       :disabled="true"
       :options="types"
     />
@@ -192,7 +210,7 @@ export default {
       />
     </div>
     <UnitInput
-      :value="value.limit[type]"
+      :value="currentLimit"
       :mode="mode"
       :placeholder="typeOption.placeholder"
       :increment="typeOption.increment"

package/components/form/ResourceQuota/Project.vue

@@ -1,20 +1,20 @@
 <script>
-import ArrayList from '@shell/components/form/ArrayList';
-import Row from './ProjectRow';
 import { QUOTA_COMPUTED, TYPES } from './shared';
 import Banner from '@components/Banner/Banner.vue';
+import ResourceQuota from '@shell/components/form/ResourceQuota/ResourceQuotaEntry.vue';
+import { RcButton } from '@components/RcButton';
+import { uniqueId } from 'lodash';
 
 export default {
   emits: [
-    'remove',
     'input',
     'validationChanged',
   ],
 
   components: {
-    ArrayList,
-    Row,
     Banner,
+    RcButton,
+    ResourceQuota,
   },
 
   props: {
@@ -37,7 +37,7 @@ export default {
   },
 
   data() {
-    return { typeValues: null };
+    return { resourceQuotas: [] };
   },
 
   created() {
@@ -45,85 +45,129 @@ export default {
     this.value.spec['namespaceDefaultResourceQuota'] = this.value.spec.namespaceDefaultResourceQuota || { limit: {} };
     this.value.spec['resourceQuota'] = this.value.spec.resourceQuota || { limit: {} };
 
-    const limit = this.value.spec.resourceQuota.limit;
-    const extendedKeys = Object.keys(limit.extended || {});
+    this.quotasFromSpec();
 
-    this.typeValues = Object.keys(limit).flatMap((k) => {
-      if (k !== TYPES.EXTENDED) {
-        return k;
-      }
+    /**
+     * Register watcher using the imperative API to reduce churn when initialing
+     * data on first render
+     */
+    this.$watch(
+      'resourceQuotas',
+      () => {
+        const { projectLimit, nsLimit } = this.specFromQuotas();
+
+        this.$emit('input', { projectLimit, nsLimit });
+
+        const hasMissingExtendedIdentifier = this.resourceQuotas.some(
+          (quota) => quota.resourceType === TYPES.EXTENDED && !quota.resourceIdentifier
+        );
 
-      return extendedKeys.map((ek) => `extended.${ ek }`);
-    });
+        this.$emit('validationChanged', !hasMissingExtendedIdentifier);
+      },
+      { deep: true }
+    );
   },
 
   computed: { ...QUOTA_COMPUTED },
 
   methods: {
-    updateType(event) {
-      const { index, type } = event;
-
-      this.typeValues[index] = type;
-
-      this.validateTypes();
+    addResource() {
+      this.resourceQuotas.push({
+        id:                    uniqueId(),
+        resourceType:          TYPES.EXTENDED,
+        resourceIdentifier:    '',
+        projectLimit:          '',
+        namespaceDefaultLimit: '',
+      });
     },
-    updateResourceIdentifier({ type, customType, index }) {
-      if (type.startsWith(TYPES.EXTENDED)) {
-        this.typeValues[index] = `extended.${ customType }`;
-      }
 
-      this.validateTypes();
+    removeResource(id) {
+      this.resourceQuotas = this.resourceQuotas.filter((quota) => quota.id !== id);
     },
-    validateTypes(isValid = true) {
-      if (!isValid) {
-        this.$emit('validationChanged', false);
-
-        return;
-      }
 
-      const hasMissingExtendedValue = this.typeValues.some((typeValue) => {
-        if (!typeValue.startsWith(TYPES.EXTENDED)) {
-          return false;
-        }
+    remainingTypes(currentType) {
+      const usedTypes = this.resourceQuotas
+        .map((quota) => quota.resourceType)
+        .filter((resourceType) => resourceType !== TYPES.EXTENDED);
 
-        const [, resourceIdentifier] = typeValue.split('.');
+      return this.mappedTypes.filter((mappedType) => mappedType.value === TYPES.EXTENDED ||
+        !usedTypes.includes(mappedType.value) ||
+        mappedType.value === currentType
+      );
+    },
 
-        return !resourceIdentifier;
-      });
+    specFromQuotas() {
+      const projectLimit = {};
+      const nsLimit = {};
 
-      this.$emit('validationChanged', !hasMissingExtendedValue);
-    },
-    remainingTypes(currentType) {
-      return this.mappedTypes
-        .filter((mappedType) => {
-          if (mappedType.value === TYPES.EXTENDED) {
-            return true;
+      this.resourceQuotas.forEach((quota) => {
+        if (quota.resourceType === TYPES.EXTENDED) {
+          if (quota.resourceIdentifier) {
+            if (!projectLimit.extended) {
+              projectLimit.extended = {};
+            }
+            if (!nsLimit.extended) {
+              nsLimit.extended = {};
+            }
+            projectLimit.extended[quota.resourceIdentifier] = quota.projectLimit;
+            nsLimit.extended[quota.resourceIdentifier] = quota.namespaceDefaultLimit;
           }
+        } else {
+          projectLimit[quota.resourceType] = quota.projectLimit;
+          nsLimit[quota.resourceType] = quota.namespaceDefaultLimit;
+        }
+      });
 
-          return !this.typeValues.includes(mappedType.value) || mappedType.value === currentType;
-        });
+      return { projectLimit, nsLimit };
     },
-    emitRemove(data) {
-      this.typeValues = this.typeValues.filter((_typeValue, index) => {
-        return index !== data.index;
-      });
 
-      this.$emit('remove', data.row?.value);
+    quotasFromSpec() {
+      const projectLimit = this.value?.spec?.resourceQuota?.limit || {};
+      const nsLimit = this.value?.spec?.namespaceDefaultResourceQuota?.limit || {};
 
-      this.validateTypes();
+      Object.keys(projectLimit).forEach((key) => {
+        if (key !== TYPES.EXTENDED) {
+          this.resourceQuotas.push({
+            id:                    uniqueId(),
+            resourceType:          key,
+            resourceIdentifier:    key,
+            projectLimit:          projectLimit[key],
+            namespaceDefaultLimit: nsLimit[key] || '',
+          });
+        } else {
+          Object.keys(projectLimit.extended || {}).forEach((extKey) => {
+            this.resourceQuotas.push({
+              id:                    uniqueId(),
+              resourceType:          TYPES.EXTENDED,
+              resourceIdentifier:    extKey,
+              projectLimit:          projectLimit.extended[extKey],
+              namespaceDefaultLimit: (nsLimit.extended || {})[extKey] || '',
+            });
+          });
+        }
+      });
     }
   },
 };
 </script>
 <template>
-  <div>
+  <div
+    role="grid"
+    :aria-label="t('resourceQuota.ariaLabel.grid')"
+  >
     <Banner
       color="info"
       label-key="resourceQuota.banner"
       class="mb-20"
     />
-    <div class="headers mb-10">
-      <div class="mr-10">
+    <div
+      role="row"
+      class="headers mb-10"
+    >
+      <div
+        role="columnheader"
+        class="mr-10"
+      >
         <label>
           {{ t('resourceQuota.headers.resourceType') }}
           <span
@@ -132,7 +176,10 @@ export default {
           >*</span>
         </label>
       </div>
-      <div class="mr-20">
+      <div
+        role="columnheader"
+        class="mr-20"
+      >
         <label>
           {{ t('resourceQuota.headers.resourceIdentifier') }}
           <span
@@ -145,37 +192,44 @@ export default {
           />
         </label>
       </div>
-      <div class="mr-20">
+      <div
+        role="columnheader"
+        class="mr-20"
+      >
         <label>{{ t('resourceQuota.headers.projectLimit') }}</label>
       </div>
-      <div class="mr-10">
+      <div
+        role="columnheader"
+        class="mr-10"
+      >
         <label>{{ t('resourceQuota.headers.namespaceDefaultLimit') }}</label>
       </div>
     </div>
-    <ArrayList
-      v-model:value="typeValues"
-      label="Resources"
-      :add-label="t('resourceQuota.add.label')"
-      :default-add-value="remainingTypes()[0] ? remainingTypes()[0].value : ''"
-      :add-allowed="remainingTypes().length > 0"
-      :mode="mode"
-      @remove="emitRemove"
-      @add="validateTypes(false)"
+    <template
+      v-for="(resourceQuota, resourceQuotaIndex) in resourceQuotas"
+      :key="resourceQuota.id"
     >
-      <template #columns="props">
-        <Row
-          :value="value"
-          :mode="mode"
-          :types="remainingTypes(typeValues[props.i])"
-          :type="typeValues[props.i]"
-          :type-values="typeValues"
-          :index="props.i"
-          @input="$emit('input', $event)"
-          @type-change="updateType($event)"
-          @update:resource-identifier="updateResourceIdentifier"
-        />
-      </template>
-    </ArrayList>
+      <ResourceQuota
+        :id="resourceQuota.id"
+        v-model:resource-type="resourceQuota.resourceType"
+        v-model:resource-identifier="resourceQuota.resourceIdentifier"
+        v-model:project-limit="resourceQuota.projectLimit"
+        v-model:namespace-default-limit="resourceQuota.namespaceDefaultLimit"
+        :index="resourceQuotaIndex + 1"
+        :types="remainingTypes(resourceQuota.resourceType)"
+        :mode="mode"
+        @remove="removeResource"
+      />
+    </template>
+    <div class="project-quotas-footer">
+      <rc-button
+        variant="tertiary"
+        data-testid="btn-add-resource"
+        @click="addResource"
+      >
+        {{ t('resourceQuota.add.label') }}
+      </rc-button>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -196,4 +250,8 @@ export default {
 .required {
   color: var(--error);
 }
+
+.project-quotas-footer {
+  margin-top: 24px;
+}
 </style>