@rancher/shell 0.3.8 → 0.3.9

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([

package/components/nav/Header.vue

@@ -621,6 +621,7 @@ export default {
       <div
         v-if="showUserMenu"
         class="user user-menu"
+        data-testid="nav_header_showUserMenu"
         tabindex="0"
         @blur="showMenu(false)"
         @click="showMenu(true)"
@@ -654,6 +655,7 @@ export default {
           >
             <ul
               class="list-unstyled dropdown"
+              data-testid="user-menu-dropdown"
               @click.stop="showMenu(false)"
             >
               <li

package/config/settings.ts

@@ -83,7 +83,12 @@ export const SETTING = {
    * both pre and post log in. If not present defaults to the usual process
    */
   THEME:                                'ui-theme',
-  SYSTEM_NAMESPACES:                    'system-namespaces'
+  SYSTEM_NAMESPACES:                    'system-namespaces',
+  /**
+   * Cluster Agent configuration
+   */
+  CLUSTER_AGENT_DEFAULT_AFFINITY:       'cluster-agent-default-affinity',
+  FLEET_AGENT_DEFAULT_AFFINITY:         'fleet-agent-default-affinity',
 };
 
 // These are the settings that are allowed to be edited via the UI

package/core/plugins-loader.js

@@ -1,5 +1,4 @@
 import Vue from 'vue';
-import $ from 'jquery';
 import JSZip from 'jszip';
 import jsyaml from 'js-yaml';
 
@@ -26,7 +25,6 @@ export default function({
     window.Vue = Vue;
 
     // Global libraries - allows us to externalise these to reduce package bundle size
-    window.$ = $;
     window.__jszip = JSZip;
     window.__jsyaml = jsyaml;
   }

package/edit/configmap.vue

@@ -31,40 +31,65 @@ export default {
   computed: {
     hasBinaryData() {
       return Object.keys(this.binaryData).length > 0;
-    }
+    },
+    /**
+     * Keep all newlines from end, see: https://yaml-multiline.info
+     * Apply to 'data' field
+     */
+    yamlModifiers() {
+      return {
+        data: Object.keys(this.data).reduce((acc, key) => ({
+          ...acc,
+          [key]: { chomping: '+' },
+        }), {}),
+      };
+    },
+
+    validationPassed() {
+      return !!this.value.name;
+    },
   },
 
   watch: {
-    data(neu, old) {
+    data(neu) {
       this.updateValue(neu, 'data');
     },
-    binaryData(neu, old) {
+    binaryData(neu) {
       this.updateValue(neu, 'binaryData');
     },
   },
 
   methods: {
+    async saveConfigMap() {
+      const yaml = this.$refs.cru.createResourceYaml(this.yamlModifiers);
+
+      await this.value.saveYaml(yaml);
+      this.done();
+    },
+
     updateValue(val, type) {
       this.$set(this.value, type, {});
 
       Object.keys(val).forEach((key) => {
         this.$set(this.value[type], key, val[key]);
       });
-    }
+    },
   }
 };
 </script>
 
 <template>
   <CruResource
+    ref="cru"
     :done-route="doneRoute"
     :mode="mode"
     :resource="value"
     :subtypes="[]"
-    :validation-passed="true"
+    :validation-passed="validationPassed"
+    :yaml-modifiers="yamlModifiers"
     :errors="errors"
     @error="e=>errors = e"
-    @finish="save"
+    @finish="saveConfigMap"
     @cancel="done"
   >
     <NameNsDescription
@@ -86,6 +111,8 @@ export default {
           :protip="t('configmap.tabs.data.protip')"
           :initial-empty-row="true"
           :value-can-be-empty="true"
+          :value-trim="false"
+          :value-markdown-multiline="true"
           :read-multiple="true"
           :read-accept="'*'"
         />