@rancher/shell 0.3.8 → 0.3.9

package/components/form/MatchExpressions.vue

@@ -29,6 +29,13 @@ export default {
       default: NODE
     },
 
+    // has select for matching fields or expressions (used for node affinity)
+    // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#nodeselectorterm-v1-core
+    matchingSelectorDisplay: {
+      type:    Boolean,
+      default: false,
+    },
+
     // whether or not to show an initial empty row of inputs when value is empty in editing modes
     initialEmptyRow: {
       type:    Boolean,
@@ -83,28 +90,39 @@ export default {
 
     let rules;
 
-    if ( isArray(this.value) ) {
+    // special case for matchFields and matchExpressions
+    // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#nodeselectorterm-v1-core
+    if ( this.matchingSelectorDisplay) {
+      const rulesByType = {
+        matchFields:      [],
+        matchExpressions: []
+      };
+
+      ['matchFields', 'matchExpressions'].forEach((type) => {
+        rulesByType[type] = this.parseRules(this.value[type], type);
+      });
+
+      rules = [...rulesByType.matchFields, ...rulesByType.matchExpressions];
+    } else if ( isArray(this.value) ) {
       rules = [...this.value];
+      rules = this.parseRules(rules);
     } else {
       rules = convert(this.value.matchLabels, this.value.matchExpressions);
+      rules = this.parseRules(rules);
     }
 
-    rules = rules.map((rule) => {
-      const newRule = clone(rule);
-
-      if (newRule.values && typeof newRule.values !== 'string') {
-        newRule.values = newRule.values.join(', ');
-      }
-
-      return newRule;
-    });
-
     if (!rules.length && this.initialEmptyRow && !this.isView) {
-      rules.push({
+      const newRule = {
         key:      '',
         operator: 'In',
         values:   ''
-      });
+      };
+
+      if (this.matchingSelectorDisplay) {
+        newRule.matching = 'matchExpressions';
+      }
+
+      rules.push(newRule);
     }
 
     return {
@@ -131,27 +149,71 @@ export default {
       return !!this.keysSelectOptions?.length;
     },
 
+    matchingSelectOptions() {
+      return [
+        {
+          label: this.t('workload.scheduling.affinity.matchExpressions.label'),
+          value: 'matchExpressions',
+        },
+        {
+          label: this.t('workload.scheduling.affinity.matchFields.label'),
+          value: 'matchFields',
+        },
+      ];
+    },
+
     ...mapGetters({ t: 'i18n/t' })
   },
 
   methods: {
+    parseRules(rules, matching) {
+      if (rules?.length) {
+        return rules.map((rule) => {
+          const newRule = clone(rule);
+
+          if (newRule.values && typeof newRule.values !== 'string') {
+            newRule.values = newRule.values.join(', ');
+          }
+
+          if (matching) {
+            newRule.matching = matching;
+          }
+
+          return newRule;
+        });
+      }
+
+      return [];
+    },
+
     removeRule(row) {
       removeObject(this.rules, row);
       this.update();
     },
 
     addRule() {
-      this.rules.push({
+      const newRule = {
         key:      '',
         operator: 'In',
         values:   ''
-      });
+      };
+
+      if (this.matchingSelectorDisplay) {
+        newRule.matching = 'matchExpressions';
+      }
+
+      this.rules.push(newRule);
     },
 
     update() {
       this.$nextTick(() => {
         const out = this.rules.map((rule) => {
-          const matchExpression = { key: rule.key, operator: rule.operator };
+          const expression = { key: rule.key, operator: rule.operator };
+
+          if (this.matchingSelectorDisplay) {
+            expression.matching = rule.matching;
+          }
+
           let val = (rule.values || '').trim();
 
           if ( rule.operator === 'Exists' || rule.operator === 'DoesNotExist') {
@@ -161,13 +223,13 @@ export default {
           }
 
           if ( val !== null ) {
-            matchExpression.values = val.split(/\s*,\s*/).filter(x => !!x);
+            expression.values = val.split(/\s*,\s*/).filter(x => !!x);
           }
 
-          return matchExpression;
+          return expression;
         }).filter(x => !!x);
 
-        if ( isArray(this.value) ) {
+        if ( isArray(this.value) || this.matchingSelectorDisplay ) {
           this.$emit('input', out);
         } else {
           this.$emit('input', simplify(out));
@@ -192,8 +254,11 @@ export default {
     <div
       v-if="rules.length"
       class="match-expression-header"
-      :class="{'view':isView}"
+      :class="{ 'view':isView, 'match-expression-header-matching': matchingSelectorDisplay }"
     >
+      <label v-if="matchingSelectorDisplay">
+        {{ t('workload.scheduling.affinity.matchExpressions.matchType') }}
+      </label>
       <label>
         {{ t('workload.scheduling.affinity.matchExpressions.key') }}
       </label>
@@ -209,8 +274,25 @@ export default {
       v-for="(row, index) in rules"
       :key="row.id"
       class="match-expression-row"
-      :class="{'view':isView, 'mb-10': index !== rules.length - 1}"
+      :class="{'view':isView, 'mb-10': index !== rules.length - 1, 'match-expression-row-matching': matchingSelectorDisplay}"
     >
+      <!-- Select for matchFields and matchExpressions -->
+      <div
+        v-if="matchingSelectorDisplay"
+        :data-testid="`input-match-type-field-${index}`"
+      >
+        <div v-if="isView">
+          {{ row.matching }}
+        </div>
+        <LabeledSelect
+          v-else
+          v-model="row.matching"
+          :mode="mode"
+          :options="matchingSelectOptions"
+          :data-testid="`input-match-type-field-control-${index}`"
+          @selecting="update"
+        />
+      </div>
       <div
         :data-testid="`input-match-expression-key-${index}`"
       >
@@ -221,6 +303,7 @@ export default {
           v-else-if="!hasKeySelectOptions"
           v-model="row.key"
           :mode="mode"
+          :data-testid="`input-match-expression-key-control-${index}`"
           @input="update"
         >
         <LabeledSelect
@@ -228,6 +311,7 @@ export default {
           v-model="row.key"
           :mode="mode"
           :options="keysSelectOptions"
+          :data-testid="`input-match-expression-key-control-select-${index}`"
         />
       </div>
       <div
@@ -244,6 +328,7 @@ export default {
           :clearable="false"
           :reduce="opt=>opt.value"
           :mode="mode"
+          :data-testid="`input-match-expression-operator-control-${index}`"
           @input="update"
         />
       </div>
@@ -266,6 +351,7 @@ export default {
           v-model="row.values"
           :mode="mode"
           :disabled="row.operator==='Exists' || row.operator==='DoesNotExist'"
+          :data-testid="`input-match-expression-values-control-${index}`"
           @input="update"
         >
       </div>
@@ -280,6 +366,7 @@ export default {
           :style="{padding:'0px'}"
 
           :disabled="mode==='view'"
+          :data-testid="`input-match-expression-remove-control-${index}`"
           @click="removeRule(row)"
         >
           <t k="generic.remove" />
@@ -293,6 +380,7 @@ export default {
       <button
         type="button"
         class="btn role-tertiary add"
+        :data-testid="`input-match-expression-add-rule`"
         @click="addRule"
       >
         <t k="workload.scheduling.affinity.matchExpressions.addRule" />
@@ -344,4 +432,15 @@ export default {
       grid-template-columns: repeat(3, 1fr) 50px;
     }
   }
+
+  .match-expression-row > div > input {
+    min-height: 40px !important;
+  }
+  .match-expression-row-matching, .match-expression-header-matching {
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+
+    &:not(.view){
+      grid-template-columns: 1fr 1fr 1fr 1fr 100px;
+    }
+  }
 </style>

package/components/form/NodeAffinity.vue

@@ -6,12 +6,13 @@ import { get, isEmpty, clone } from '@shell/utils/object';
 import { NODE } from '@shell/config/types';
 import MatchExpressions from '@shell/components/form/MatchExpressions';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { LabeledInput } from '@components/Form/LabeledInput';
 import { randomStr } from '@shell/utils/string';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 
 export default {
   components: {
-    ArrayListGrouped, MatchExpressions, LabeledSelect
+    ArrayListGrouped, MatchExpressions, LabeledSelect, LabeledInput
   },
 
   props: {
@@ -27,6 +28,13 @@ export default {
       type:    String,
       default: 'create'
     },
+
+    // has select for matching fields or expressions (used for node affinity)
+    // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#nodeselectorterm-v1-core
+    matchingSelectorDisplay: {
+      type:    Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -89,7 +97,7 @@ export default {
 
       this.allSelectorTerms.forEach((term) => {
         if (term.weight) {
-          const neu = { weight: 1, preference: term };
+          const neu = { weight: term.weight, preference: term };
 
           preferredDuringSchedulingIgnoredDuringExecution.push(neu);
         } else {
@@ -103,6 +111,7 @@ export default {
       if (requiredDuringSchedulingIgnoredDuringExecution.nodeSelectorTerms.length) {
         out.requiredDuringSchedulingIgnoredDuringExecution = requiredDuringSchedulingIgnoredDuringExecution;
       }
+
       this.$emit('input', out);
     },
 
@@ -124,6 +133,28 @@ export default {
       return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
     },
 
+    updateExpressions(row, expressions) {
+      const expressionsMatching = {
+        matchFields:      [],
+        matchExpressions: []
+      };
+
+      if (expressions.length) {
+        expressions.forEach((expression) => {
+          expressionsMatching[expression.matching || 'matchExpressions'].push(expression);
+        });
+
+        if (expressionsMatching.matchFields.length) {
+          this.$set(row, 'matchFields', expressionsMatching.matchFields);
+        }
+        if (expressionsMatching.matchExpressions.length) {
+          this.$set(row, 'matchExpressions', expressionsMatching.matchExpressions);
+        }
+
+        this.update();
+      }
+    },
+
     get,
 
     isEmpty
@@ -148,23 +179,42 @@ export default {
       >
         <template #default="props">
           <div class="row">
-            <div class="col span-6">
+            <div class="col span-9">
               <LabeledSelect
                 :options="affinityOptions"
                 :value="priorityDisplay(props.row.value)"
                 :label="t('workload.scheduling.affinity.priority')"
                 :mode="mode"
+                :data-testid="`node-affinity-priority-index${props.i}`"
                 @input="(changePriority(props.row.value))"
               />
             </div>
+            <div
+              v-if="props.row.value.weight"
+              class="col span-3"
+            >
+              <LabeledInput
+                v-model.number="props.row.value.weight"
+                :mode="mode"
+                type="number"
+                min="1"
+                max="100"
+                :label="t('workload.scheduling.affinity.weight.label')"
+                :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
+                :data-testid="`node-affinity-weight-index${props.i}`"
+              />
+            </div>
           </div>
           <MatchExpressions
             :key="rerenderNums"
-            v-model="props.row.value.matchExpressions"
+            :value="matchingSelectorDisplay ? props.row.value : props.row.value.matchExpressions"
+            :matching-selector-display="matchingSelectorDisplay"
             :mode="mode"
             class="col span-12 mt-20"
             :type="node"
             :show-remove="false"
+            :data-testid="`node-affinity-expressions-index${props.i}`"
+            @input="(updateExpressions(props.row.value, $event))"
           />
         </template>
       </ArrayListGrouped>