@rancher/shell 0.3.7 → 0.3.9

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>

package/components/form/PodAffinity.vue

@@ -12,6 +12,12 @@ 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',
+  ALL:      'all',
+  SELECTED: 'selected',
+};
+
 export default {
   components: {
     ArrayListGrouped, MatchExpressions, LabeledSelect, RadioGroup, LabeledInput
@@ -26,6 +32,13 @@ export default {
       }
     },
 
+    // Field key on the value object to store the pod affinity - typically this is 'affinity'
+    // Cluster Agent Configuration uses a different field
+    field: {
+      type:    String,
+      default: 'affinity'
+    },
+
     mode: {
       type:    String,
       default: 'create'
@@ -40,6 +53,22 @@ export default {
       type:    Array,
       default: null
     },
+
+    allNamespacesOptionAvailable: {
+      default: false,
+      type:    Boolean
+    },
+
+    forceInputNamespaceSelection: {
+      default: false,
+      type:    Boolean
+    },
+
+    removeLabeledInputNamespaceLabel: {
+      default: false,
+      type:    Boolean
+    },
+
     loading: {
       default: false,
       type:    Boolean
@@ -47,32 +76,38 @@ export default {
   },
 
   data() {
-    if (!this.value.affinity) {
-      this.$set(this.value, 'affinity', {});
+    if (!this.value[this.field]) {
+      this.$set(this.value, this.field, {});
     }
-    const { podAffinity = {}, podAntiAffinity = {} } = this.value.affinity;
+    const { podAffinity = {}, podAntiAffinity = {} } = this.value[this.field];
     const allAffinityTerms = [...(podAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
-      const out = clone(term);
+      let out = clone(term);
 
       out._id = randomStr(4);
       out._anti = false;
       if (term.podAffinityTerm) {
         Object.assign(out, term.podAffinityTerm);
-        out._namespaces = (term.podAffinityTerm.namespaces || []).toString();
+        out = this.parsePodAffinityTerm(out);
+
         delete out.podAffinityTerm;
+      } else {
+        out = this.parsePodAffinityTerm(out);
       }
 
       return out;
     });
     const allAntiTerms = [...(podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
-      const out = clone(term);
+      let out = clone(term);
 
       out._id = randomStr(4);
       out._anti = true;
       if (term.podAffinityTerm) {
         Object.assign(out, term.podAffinityTerm);
-        out._namespaces = (term.podAffinityTerm.namespaces || []).toString();
+        out = this.parsePodAffinityTerm(out);
+
         delete out.podAffinityTerm;
+      } else {
+        out = this.parsePodAffinityTerm(out);
       }
 
       return out;
@@ -82,10 +117,17 @@ export default {
 
     return {
       allSelectorTerms,
-      defaultWeight: 1,
+      defaultWeight:   1,
       // rules in MatchExpressions.vue can not catch changes what happens on parent component
       // we need re-render it via key changing
-      rerenderNums:  randomStr(4)
+      rerenderNums:    randomStr(4),
+      NAMESPACE_SELECTION_OPTION_VALUES,
+      defaultAddValue: {
+        _namespaceOption: NAMESPACE_SELECTION_OPTION_VALUES.POD,
+        matchExpressions: [],
+        namespaces:       null,
+        _namespaces:      null,
+      }
     };
   },
   computed: {
@@ -101,9 +143,14 @@ export default {
       return NODE;
     },
 
-    allNamespaces() {
+    labeledInputNamespaceLabel() {
+      return this.removeLabeledInputNamespaceLabel ? '' : this.t('workload.scheduling.affinity.matchExpressions.inNamespaces');
+    },
+
+    allNamespacesOptions() {
       const inStore = this.$store.getters['currentStore'](NAMESPACE);
       const choices = this.namespaces || this.$store.getters[`${ inStore }/all`](NAMESPACE);
+
       const out = sortBy(choices.map((obj) => {
         return {
           label: obj.nameDisplay,
@@ -122,8 +169,38 @@ export default {
       return this.nodes.length;
     },
 
+    namespaceSelectionOptions() {
+      if (this.allNamespacesOptionAvailable) {
+        return [
+          NAMESPACE_SELECTION_OPTION_VALUES.POD,
+          NAMESPACE_SELECTION_OPTION_VALUES.ALL,
+          NAMESPACE_SELECTION_OPTION_VALUES.SELECTED
+        ];
+      }
+
+      return [
+        NAMESPACE_SELECTION_OPTION_VALUES.POD,
+        NAMESPACE_SELECTION_OPTION_VALUES.SELECTED
+      ];
+    },
+
+    namespaceSelectionLabels() {
+      if (this.allNamespacesOptionAvailable) {
+        return [
+          this.t('workload.scheduling.affinity.thisPodNamespace'),
+          this.t('workload.scheduling.affinity.allNamespaces'),
+          this.t('workload.scheduling.affinity.matchExpressions.inNamespaces')
+        ];
+      }
+
+      return [
+        this.t('workload.scheduling.affinity.thisPodNamespace'),
+        this.t('workload.scheduling.affinity.matchExpressions.inNamespaces')
+      ];
+    },
+
     hasNamespaces() {
-      return this.allNamespaces.length;
+      return this.allNamespacesOptions.length;
     },
   },
 
@@ -132,6 +209,20 @@ export default {
   },
 
   methods: {
+    parsePodAffinityTerm(out) {
+      if (out.namespaceSelector && typeof out.namespaceSelector === 'object' && !Object.keys(out.namespaceSelector).length && this.allNamespacesOptionAvailable) {
+        out._namespaceOption = NAMESPACE_SELECTION_OPTION_VALUES.ALL;
+      } else if (out.namespaces?.length) {
+        out._namespaceOption = NAMESPACE_SELECTION_OPTION_VALUES.SELECTED;
+      } else {
+        out._namespaceOption = NAMESPACE_SELECTION_OPTION_VALUES.POD;
+      }
+
+      out._namespaces = (out.namespaces || []).toString();
+
+      return out;
+    },
+
     update() {
       const podAffinity = { requiredDuringSchedulingIgnoredDuringExecution: [], preferredDuringSchedulingIgnoredDuringExecution: [] };
       const podAntiAffinity = { requiredDuringSchedulingIgnoredDuringExecution: [], preferredDuringSchedulingIgnoredDuringExecution: [] };
@@ -154,7 +245,7 @@ export default {
         }
       });
 
-      Object.assign(this.value.affinity, { podAffinity, podAntiAffinity });
+      Object.assign(this.value[this.field], { podAffinity, podAntiAffinity });
       this.$emit('update', this.value);
     },
 
@@ -163,17 +254,6 @@ export default {
       this.queueUpdate();
     },
 
-    addSelector() {
-      const neu = {
-        namespaces:    null,
-        labelSelector: { matchExpressions: [] },
-        topologyKey:   '',
-        _id:           randomStr(4)
-      };
-
-      this.allSelectorTerms.push(neu);
-    },
-
     changePriority(term, idx) {
       if (term.weight) {
         delete term.weight;
@@ -189,14 +269,41 @@ export default {
       return term.weight ? this.t('workload.scheduling.affinity.preferred') : this.t('workload.scheduling.affinity.required');
     },
 
-    changeNamespaceMode(term, idx) {
-      if (term.namespaces) {
+    changeNamespaceMode(val, term, idx) {
+      this.$set(term, '_namespaceOption', val);
+
+      switch (val) {
+      case NAMESPACE_SELECTION_OPTION_VALUES.POD:
         term.namespaces = null;
         term._namespaces = null;
-      } else {
+
+        if (term.namespaceSelector || term.namespaceSelector === null) {
+          delete term.namespaceSelector;
+        }
+        break;
+      case NAMESPACE_SELECTION_OPTION_VALUES.ALL:
+        term.namespaceSelector = {};
+
+        if (term.namespaces || term.namespaces === null) {
+          delete term.namespaces;
+        }
+
+        if (term._namespaces || term._namespaces === null) {
+          delete term._namespaces;
+        }
+        break;
+
+      default:
         this.$set(term, 'namespaces', []);
         this.$set(term, '_namespaces', '');
+
+        if (term.namespaceSelector || term.namespaceSelector === null) {
+          delete term.namespaceSelector;
+        }
+
+        break;
       }
+
       this.$set(this.allSelectorTerms, idx, term);
       this.queueUpdate();
     },
@@ -205,7 +312,7 @@ export default {
       let nsArray = namespaces;
 
       // namespaces would be String if there is no namespace
-      if (!this.hasNamespaces) {
+      if (typeof namespaces === 'string') {
         nsArray = namespaces.split(',').map(ns => ns.trim()).filter(ns => ns?.length);
       }
 
@@ -231,9 +338,9 @@ export default {
       <ArrayListGrouped
         v-model="allSelectorTerms"
         class="mt-20"
-        :default-add-value="{ matchExpressions: [] }"
+        :default-add-value="defaultAddValue"
         :mode="mode"
-        :add-label="t('workload.scheduling.affinity.addNodeSelector')"
+        :add-label="t('podAffinity.addLabel')"
         @remove="remove"
       >
         <template #default="props">
@@ -244,6 +351,7 @@ export default {
                 :options="[t('workload.scheduling.affinity.affinityOption'),t('workload.scheduling.affinity.antiAffinityOption')]"
                 :value="props.row.value._anti ?t('workload.scheduling.affinity.antiAffinityOption') :t('workload.scheduling.affinity.affinityOption') "
                 :label="t('workload.scheduling.affinity.type')"
+                :data-testid="`pod-affinity-type-index${props.i}`"
                 @input="$set(props.row.value, '_anti',!props.row.value._anti)"
               />
             </div>
@@ -254,41 +362,44 @@ export default {
                 :options="[t('workload.scheduling.affinity.preferred'),t('workload.scheduling.affinity.required')]"
                 :value="priorityDisplay(props.row.value)"
                 :label="t('workload.scheduling.affinity.priority')"
+                :data-testid="`pod-affinity-priority-index${props.i}`"
                 @input="changePriority(props.row.value, props.i)"
               />
             </div>
           </div>
           <div class="row">
             <RadioGroup
-              :options="[false, true]"
-              :labels="[t('workload.scheduling.affinity.thisPodNamespace'),t('workload.scheduling.affinity.matchExpressions.inNamespaces'),]"
+              :options="namespaceSelectionOptions"
+              :labels="namespaceSelectionLabels"
               :name="`namespaces-${props.row.value._id}`"
               :mode="mode"
-              :value="!!props.row.value.namespaces"
-              @input="changeNamespaceMode(props.row.value, props.i)"
+              :value="props.row.value._namespaceOption"
+              :data-testid="`pod-affinity-namespacetype-index${props.i}`"
+              @input="changeNamespaceMode($event, props.row.value, props.i)"
             />
           </div>
-          <div class="spacer" />
           <div
-            v-if="!!props.row.value.namespaces || !!get(props.row.value, 'podAffinityTerm.namespaces')"
-            class="row mb-20"
+            v-if="props.row.value._namespaceOption === NAMESPACE_SELECTION_OPTION_VALUES.SELECTED"
+            class="row mt-10 mb-20"
           >
             <LabeledSelect
-              v-if="hasNamespaces"
+              v-if="hasNamespaces && !forceInputNamespaceSelection"
               v-model="props.row.value.namespaces"
               :mode="mode"
               :multiple="true"
               :taggable="true"
-              :options="allNamespaces"
+              :options="allNamespacesOptions"
               :label="t('workload.scheduling.affinity.matchExpressions.inNamespaces')"
+              :data-testid="`pod-affinity-namespace-select-index${props.i}`"
               @input="updateNamespaces(props.row.value, props.row.value.namespaces)"
             />
             <LabeledInput
               v-else
               v-model="props.row.value._namespaces"
               :mode="mode"
-              :label="t('workload.scheduling.affinity.matchExpressions.inNamespaces')"
+              :label="labeledInputNamespaceLabel"
               :placeholder="t('cluster.credential.harvester.affinity.namespaces.placeholder')"
+              :data-testid="`pod-affinity-namespace-input-index${props.i}`"
               @input="updateNamespaces(props.row.value, props.row.value._namespaces)"
             />
           </div>
@@ -299,11 +410,11 @@ export default {
             :type="pod"
             :value="get(props.row.value, 'labelSelector.matchExpressions')"
             :show-remove="false"
+            :data-testid="`pod-affinity-expressions-index${props.i}`"
             @input="e=>set(props.row.value, 'labelSelector.matchExpressions', e)"
           />
-          <div class="spacer" />
-          <div class="row">
-            <div class="col span-12">
+          <div class="row mt-20">
+            <div class="col span-9">
               <LabeledSelect
                 v-if="hasNodes"
                 v-model="props.row.value.topologyKey"
@@ -317,6 +428,7 @@ export default {
                 :options="existingNodeLabels"
                 :disabled="mode==='view'"
                 :loading="loading"
+                :data-testid="`pod-affinity-topology-select-index${props.i}`"
                 @input="update"
               />
               <LabeledInput
@@ -326,14 +438,14 @@ export default {
                 :label="t('workload.scheduling.affinity.topologyKey.label')"
                 :placeholder="t('workload.scheduling.affinity.topologyKey.placeholder')"
                 required
+                :data-testid="`pod-affinity-topology-input-index${props.i}`"
                 @input="update"
               />
             </div>
-          </div>
-
-          <div class="spacer" />
-          <div class="row">
-            <div class="col span-6">
+            <div
+              v-if="props.row.value.weight"
+              class="col span-3"
+            >
               <LabeledInput
                 v-model.number="props.row.value.weight"
                 :mode="mode"
@@ -342,6 +454,7 @@ export default {
                 max="100"
                 :label="t('workload.scheduling.affinity.weight.label')"
                 :placeholder="t('workload.scheduling.affinity.weight.placeholder')"
+                :data-testid="`pod-affinity-weight-index${props.i}`"
               />
             </div>
           </div>

package/components/form/Tolerations.vue

@@ -115,7 +115,24 @@ export default {
     },
 
     update() {
-      this.$emit('input', this.rules);
+      // let's delete the vKey prop as it's only poluting the data
+      const rules = this.rules.map((rule) => {
+        const newRule = { ...rule };
+
+        // prevent vKey from being sent as data
+        if (newRule.vKey) {
+          delete newRule.vKey;
+        }
+
+        // let's clear the value field if operator is Exists
+        if (newRule.operator === 'Exists' && newRule.value) {
+          newRule.value = null;
+        }
+
+        return newRule;
+      });
+
+      this.$emit('input', rules);
     },
 
     addToleration() {
@@ -126,6 +143,8 @@ export default {
       if (neu !== 'NoExecute' && rule.tolerationSeconds) {
         delete rule.tolerationSeconds;
       }
+
+      this.update();
     }
   }
 
@@ -146,7 +165,7 @@ export default {
       <span />
     </div>
     <div
-      v-for="rule in rules"
+      v-for="(rule, index) in rules"
       :key="rule.vKey"
       class="rule"
     >
@@ -154,6 +173,9 @@ export default {
         <LabeledInput
           v-model="rule.key"
           :mode="mode"
+          :data-testid="`toleration-key-index${ index }`"
+          class="height-adjust-input"
+          @input="update"
         />
       </div>
       <div class="col">
@@ -162,6 +184,7 @@ export default {
           v-model="rule.operator"
           :options="operatorOpts"
           :mode="mode"
+          :data-testid="`toleration-operator-index${ index }`"
           @input="update"
         />
       </div>
@@ -171,6 +194,7 @@ export default {
             value="n/a"
             :mode="mode"
             disabled
+            class="height-adjust-input"
           />
         </div>
       </template>
@@ -179,6 +203,9 @@ export default {
           <LabeledInput
             v-model="rule.value"
             :mode="mode"
+            :data-testid="`toleration-value-index${ index }`"
+            class="height-adjust-input"
+            @input="update"
           />
         </div>
       </template>
@@ -187,6 +214,7 @@ export default {
           v-model="rule.effect"
           :options="effectOpts"
           :mode="mode"
+          :data-testid="`toleration-effect-index${ index }`"
           @input="e=>updateEffect(e, rule)"
         />
       </div>
@@ -196,6 +224,9 @@ export default {
           :disabled="rule.effect !== 'NoExecute'"
           :mode="mode"
           suffix="Seconds"
+          :data-testid="`toleration-seconds-index${ index }`"
+          class="height-adjust-input"
+          @input="update"
         />
       </div>
       <div class="col remove">
@@ -204,6 +235,7 @@ export default {
           type="button"
           class="btn role-link"
           :disabled="mode==='view'"
+          :data-testid="`toleration-remove-index${ index }`"
           @click="remove(rule)"
         >
           <t k="generic.remove" />
@@ -214,6 +246,7 @@ export default {
       v-if="!isView"
       type="button"
       class="btn role-tertiary"
+      data-testid="add-toleration-btn"
       @click="addToleration"
     >
       <t k="workload.scheduling.tolerations.addToleration" />
@@ -228,8 +261,8 @@ export default {
 
 .rule, .toleration-headers{
   display: grid;
-  grid-template-columns: 20% 10% 20% 15% 20% 10%;
-  grid-gap: $column-gutter;
+  grid-template-columns: 20% 10% 20% 15% 20% 15%;
+  grid-gap: 10px;
   align-items: center;
 }
 
@@ -247,4 +280,7 @@ export default {
 .remove BUTTON {
   padding: 0px;
 }
+.height-adjust-input {
+  min-height: 42px;
+}
 </style>

package/components/form/__tests__/ArrayList.test.ts

@@ -23,7 +23,7 @@ describe('the ArrayList', () => {
         initialEmptyRow: true
       },
     });
-    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+    const arrayListBoxes = wrapper.findAll('[data-testid^="array-list-box"]');
 
     expect(arrayListBoxes).toHaveLength(1);
   });
@@ -40,7 +40,7 @@ describe('the ArrayList', () => {
 
     await arrayListButton.click();
     await arrayListButton.click();
-    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+    const arrayListBoxes = wrapper.findAll('[data-testid^="array-list-box"]');
 
     expect(arrayListBoxes).toHaveLength(2);
   });
@@ -55,7 +55,7 @@ describe('the ArrayList', () => {
     const deleteButton = wrapper.get('[data-testid^="remove-item"]').element as HTMLElement;
 
     await deleteButton.click();
-    const arrayListBoxes = wrapper.findAll('[data-testid="array-list-box"]');
+    const arrayListBoxes = wrapper.findAll('[data-testid^="array-list-box"]');
 
     expect(arrayListBoxes).toHaveLength(1);
   });

package/components/form/__tests__/MatchExpressions.test.ts

@@ -21,7 +21,7 @@ describe('component: MatchExpressions', () => {
 
     const inputWraps = wrapper.findAll('[data-testid^=input-match-expression-]');
 
-    expect(inputWraps).toHaveLength(3);
+    expect(inputWraps).toHaveLength(8);
   });
 
   it.each([