@rancher/shell 0.3.8 → 0.3.10

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/Probe.vue

@@ -149,7 +149,7 @@ export default {
         {{ label }}
         <i
           v-if="description"
-          v-tooltip="description"
+          v-clean-tooltip="description"
           class="icon icon-info"
         />
       </h3>

package/components/form/ProjectMemberEditor.vue

@@ -7,6 +7,7 @@ import { Card } from '@components/Card';
 import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { DESCRIPTION } from '@shell/config/labels-annotations';
+import DOMPurify from 'dompurify';
 
 export default {
   components: {
@@ -160,9 +161,9 @@ export default {
 
     options() {
       const customRoles = this.customRoles.map(role => ({
-        label:       role.nameDisplay,
-        description: role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('projectMembers.projectPermissions.noDescription'),
-        value:       role.id
+        label:       this.purifyOption(role.nameDisplay),
+        description: this.purifyOption(role.description || role.metadata?.annotations?.[DESCRIPTION] || this.t('projectMembers.projectPermissions.noDescription')),
+        value:       this.purifyOption(role.id),
       }));
 
       return [
@@ -245,6 +246,9 @@ export default {
       }
 
       return [permissionGroup];
+    },
+    purifyOption(option) {
+      return DOMPurify.sanitize(option, { ALLOWED_TAGS: ['span'] });
     }
   }
 };
@@ -301,7 +305,7 @@ export default {
             />
             <i
               v-if="permission.locked"
-              v-tooltip="permission.tooltip"
+              v-clean-tooltip="permission.tooltip"
               class="icon icon-lock icon-fw"
             />
           </div>

package/components/form/ResourceQuota/NamespaceRow.vue

@@ -182,7 +182,7 @@ export default {
     />
     <div class="resource-availability mr-10">
       <PercentageBar
-        v-tooltip="tooltip"
+        v-clean-tooltip="tooltip"
         class="percentage-bar"
         :value="percentageUsed"
         :slices="slices"

package/components/form/ServicePorts.vue

@@ -137,7 +137,7 @@ export default {
         <span class="port">
           <t k="servicePorts.rules.listening.label" />
           <i
-            v-tooltip="t('servicesPage.listeningPorts')"
+            v-clean-tooltip="t('servicesPage.listeningPorts')"
             class="icon icon-info flex"
           />
           <span class="text-error">*</span>
@@ -151,7 +151,7 @@ export default {
         <span class="target-port">
           <t k="servicePorts.rules.target.label" />
           <i
-            v-tooltip="t('servicesPage.targetPorts')"
+            v-clean-tooltip="t('servicesPage.targetPorts')"
             class="icon icon-info flex"
           />
           <span class="text-error">*</span>

package/components/form/Tolerations.vue

@@ -27,7 +27,27 @@ export default {
   },
 
   data() {
-    return { rules: [...this.value] };
+    const rules = [];
+
+    // on creation in agent configuration, the backend "eats"
+    // the empty "effect" string, which doesn't happen on edit
+    // just to make sure we populate it correcty, let's consider
+    // no prop "effect" as an empty string which means all
+    // https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.25/#toleration-v1-core
+    if (this.value.length) {
+      this.value.forEach((v) => {
+        if (!Object.keys(v).includes('effect')) {
+          rules.push({
+            ...v,
+            effect: ''
+          });
+        } else {
+          rules.push(v);
+        }
+      });
+    }
+
+    return { rules };
   },
 
   computed: {
@@ -83,7 +103,7 @@ export default {
       return [
         {
           label: this.t('workload.scheduling.tolerations.effectOptions.all'),
-          value: 'All'
+          value: ''
         },
         {
           label: this.t('workload.scheduling.tolerations.effectOptions.noSchedule'),
@@ -115,17 +135,43 @@ 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;
+        }
+
+        // remove effect from payload sent upstream, as it's empty
+        // it should be null, but the Select input doesn't seem to like it
+        // so we keep it as '' and sanitize it here
+        if (newRule.effect === '') {
+          delete newRule.effect;
+        }
+
+        return newRule;
+      });
+
+      this.$emit('input', rules);
     },
 
     addToleration() {
-      this.rules.push({ vKey: random32() });
+      this.rules.push({ vKey: random32(), effect: '' });
     },
 
     updateEffect(neu, rule) {
       if (neu !== 'NoExecute' && rule.tolerationSeconds) {
         delete rule.tolerationSeconds;
       }
+
+      this.update();
     }
   }
 
@@ -146,7 +192,7 @@ export default {
       <span />
     </div>
     <div
-      v-for="rule in rules"
+      v-for="(rule, index) in rules"
       :key="rule.vKey"
       class="rule"
     >
@@ -154,6 +200,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 +211,7 @@ export default {
           v-model="rule.operator"
           :options="operatorOpts"
           :mode="mode"
+          :data-testid="`toleration-operator-index${ index }`"
           @input="update"
         />
       </div>
@@ -171,6 +221,7 @@ export default {
             value="n/a"
             :mode="mode"
             disabled
+            class="height-adjust-input"
           />
         </div>
       </template>
@@ -179,6 +230,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 +241,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 +251,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 +262,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 +273,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 +288,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 +307,7 @@ export default {
 .remove BUTTON {
   padding: 0px;
 }
+.height-adjust-input {
+  min-height: 42px;
+}
 </style>

package/components/form/WorkloadPorts.vue

@@ -50,6 +50,8 @@ export default {
         row._showHost = true;
       }
 
+      row._ipam = '';
+
       return row;
     });
 
@@ -387,7 +389,6 @@ export default {
             :mode="mode"
             :options="ipamOptions"
             :label="t('servicesPage.harvester.ipam.label')"
-            :disabled="mode === 'edit'"
             @input="queueUpdate"
           />
         </div>