@rancher/shell 3.0.4 → 3.0.5-rc.1

package/components/form/NameNsDescription.vue

@@ -1,5 +1,7 @@
 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { computed, ref, toRef, watch } from 'vue';
+import { mapActions, useStore } from 'vuex';
+
 import { get, set } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { NAMESPACE } from '@shell/config/types';
@@ -8,6 +10,7 @@ import { _VIEW, _EDIT, _CREATE } from '@shell/config/query-params';
 import { LabeledInput } from '@components/Form/LabeledInput';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { normalizeName } from '@shell/utils/kube';
+import { useI18n } from '@shell/composables/useI18n';
 
 export default {
   name: 'NameNsDescription',
@@ -169,81 +172,74 @@ export default {
   },
 
   data() {
-    const v = this.value;
-    const metadata = v.metadata;
-    let namespace, name, description;
+    return { createNamespace: false };
+  },
 
-    if (this.nameKey) {
-      name = get(v, this.nameKey);
-    } else {
-      name = metadata?.name;
-    }
+  setup(props, { emit }) {
+    const v = toRef(props.value);
+    const metadata = v.value.metadata;
+    const namespace = ref(null);
+    const name = ref(null);
+    const description = ref(null);
 
-    if (this.namespaced) {
-      if (this.forceNamespace) {
-        namespace = this.forceNamespace;
-        this.updateNamespace(namespace);
-      } else if (this.namespaceKey) {
-        namespace = get(v, this.namespaceKey);
-      } else {
-        namespace = metadata?.namespace;
+    watch(name, (val) => {
+      if (props.normalizeName) {
+        val = normalizeName(val);
       }
 
-      if (!namespace && !this.noDefaultNamespace) {
-        namespace = this.$store.getters['defaultNamespace'];
-        if (metadata) {
-          metadata.namespace = namespace;
-        }
+      if (props.nameKey) {
+        set(props.value, props.nameKey, val);
+      } else {
+        props.value.metadata['name'] = val;
       }
-    }
+      emit('update:value', props.value);
+    });
 
-    if (this.descriptionKey) {
-      description = get(v, this.descriptionKey);
+    if (props.nameKey) {
+      name.value = get(v.value, props.nameKey);
     } else {
-      description = metadata?.annotations?.[DESCRIPTION];
+      name.value = metadata?.name || '';
     }
 
-    const inStore = this.$store.getters['currentStore']();
-    const nsSchema = this.$store.getters[`${ inStore }/schemaFor`](NAMESPACE);
+    const isCreate = computed(() => {
+      return props.mode === _CREATE;
+    });
 
-    return {
-      namespace,
-      name,
-      description,
-      createNamespace: false,
-      nsSchema
-    };
-  },
+    const store = useStore();
+    const { t } = useI18n(store);
+    const allowedNamespaces = computed(() => store.getters.allowedNamespaces());
+    const storeNamespaces = computed(() => store.getters.namespaces());
+    const currentCluster = computed(() => store.getters.currentCluster);
 
-  computed: {
-    ...mapGetters(['currentProduct', 'currentCluster', 'namespaces', 'allowedNamespaces']),
-    ...mapActions('cru-resource', ['setCreateNamespace']),
-    namespaceReallyDisabled() {
-      return (
-        !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
-      ); // namespace is never editable
-    },
+    const inStore = computed(() => {
+      return store.getters['currentStore']();
+    });
 
-    nameReallyDisabled() {
-      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
-    },
+    const nsSchema = computed(() => {
+      return store.getters[`${ inStore.value }/schemaFor`](NAMESPACE);
+    });
+
+    const canCreateNamespace = computed(() => {
+      // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
+      return (nsSchema.value?.collectionMethods || []).includes('POST') && currentCluster.value?.canUpdate;
+    });
 
     /**
      * Map namespaces from the store to options, adding divider and create button
      */
-    options() {
+    const options = computed(() => {
       let namespaces;
 
-      if (this.namespacesOverride) {
+      if (props.namespacesOverride) {
         // Use the resources provided
-        namespaces = this.namespacesOverride;
+        namespaces = props.namespacesOverride;
       } else {
-        if (this.namespaceOptions) {
+        if (props.namespaceOptions) {
           // Use the namespaces provided
-          namespaces = (this.namespaceOptions.map((ns) => ns.name) || []).sort();
+          namespaces = (props.namespaceOptions.map((ns) => ns.name) || []).sort();
         } else {
           // Determine the namespaces
-          const namespaceObjs = this.isCreate ? this.allowedNamespaces() : this.namespaces();
+          const namespaceObjs = isCreate.value ? allowedNamespaces.value : storeNamespaces.value;
 
           namespaces = Object.keys(namespaceObjs);
         }
@@ -251,22 +247,22 @@ export default {
 
       const options = namespaces
         .map((namespace) => ({ nameDisplay: namespace, id: namespace }))
-        .map(this.namespaceMapper || ((obj) => ({
+        .map(props.namespaceMapper || ((obj) => ({
           label: obj.nameDisplay,
           value: obj.id,
         })));
 
       const sortedByLabel = sortBy(options, 'label');
 
-      if (this.forceNamespace) {
+      if (props.forceNamespace) {
         sortedByLabel.unshift({
-          label: this.forceNamespace,
-          value: this.forceNamespace,
+          label: props.forceNamespace,
+          value: props.forceNamespace,
         });
       }
 
       const createButton = {
-        label: this.t('namespace.createNamespace'),
+        label: t('namespace.createNamespace'),
         value: '',
         kind:  'highlighted'
       };
@@ -276,20 +272,78 @@ export default {
         kind:     'divider'
       };
 
-      const createOverhead = this.canCreateNamespace || this.createNamespaceOverride ? [createButton, divider] : [];
+      const createOverhead = canCreateNamespace.value || props.createNamespaceOverride ? [createButton, divider] : [];
 
       return [
         ...createOverhead,
         ...sortedByLabel
       ];
+    });
+
+    const updateNamespace = (val) => {
+      if (props.forceNamespace) {
+        val = props.forceNamespace;
+      }
+
+      if (props.namespaced) {
+        emit('isNamespaceNew', !val || (options.value && !options.value.find((n) => n.value === val)));
+      }
+
+      if (props.namespaceKey) {
+        set(props.value, props.namespaceKey, val);
+      } else {
+        props.value.metadata.namespace = val;
+      }
+    };
+
+    if (props.namespaced) {
+      if (props.forceNamespace) {
+        namespace.value = toRef(props.forceNamespace);
+        updateNamespace(namespace);
+      } else if (props.namespaceKey) {
+        namespace.value = get(v, props.namespaceKey);
+      } else {
+        namespace.value = metadata?.namespace;
+      }
+
+      if (!namespace.value && !props.noDefaultNamespace) {
+        namespace.value = store.getters['defaultNamespace'];
+        if (metadata) {
+          metadata.namespace = namespace;
+        }
+      }
+    }
+
+    if (props.descriptionKey) {
+      description.value = get(v, props.descriptionKey);
+    } else {
+      description.value = metadata?.annotations?.[DESCRIPTION];
+    }
+
+    return {
+      namespace,
+      name,
+      description,
+      isCreate,
+      options,
+      updateNamespace,
+    };
+  },
+
+  computed: {
+    ...mapActions('cru-resource', ['setCreateNamespace']),
+    namespaceReallyDisabled() {
+      return (
+        !!this.forceNamespace || this.namespaceDisabled || this.mode === _EDIT
+      ); // namespace is never editable
     },
 
-    isView() {
-      return this.mode === _VIEW;
+    nameReallyDisabled() {
+      return this.nameDisabled || (this.mode === _EDIT && !this.nameEditable);
     },
 
-    isCreate() {
-      return this.mode === _CREATE;
+    isView() {
+      return this.mode === _VIEW;
     },
 
     showCustomize() {
@@ -308,27 +362,9 @@ export default {
 
       return `span-${ span }`;
     },
-
-    canCreateNamespace() {
-      // Check if user can push to namespaces... and as the ns is outside of a project restrict to admins and cluster owners
-      return (this.nsSchema?.collectionMethods || []).includes('POST') && this.currentCluster?.canUpdate;
-    }
   },
 
   watch: {
-    name(val) {
-      if (this.normalizeName) {
-        val = normalizeName(val);
-      }
-
-      if (this.nameKey) {
-        set(this.value, this.nameKey, val);
-      } else {
-        this.value.metadata['name'] = val;
-      }
-      this.$emit('update:value', this.value);
-    },
-
     namespace(val) {
       this.updateNamespace(val);
       this.$emit('update:value', this.value);
@@ -346,29 +382,13 @@ export default {
 
   mounted() {
     this.$nextTick(() => {
-      if (this.$refs.name) {
-        this.$refs.name.focus();
+      if (this.$refs.nameInput) {
+        this.$refs.nameInput.focus();
       }
     });
   },
 
   methods: {
-    updateNamespace(val) {
-      if (this.forceNamespace) {
-        val = this.forceNamespace;
-      }
-
-      if (this.namespaced) {
-        this.$emit('isNamespaceNew', !val || (this.options && !this.options.find((n) => n.value === val)));
-      }
-
-      if (this.namespaceKey) {
-        set(this.value, this.namespaceKey, val);
-      } else {
-        this.value.metadata.namespace = val;
-      }
-    },
-
     changeNameAndNamespace(e) {
       this.name = (e.text || '').toLowerCase();
       this.namespace = e.selected;
@@ -389,7 +409,7 @@ export default {
           true,
         );
         this.$emit('isNamespaceNew', true);
-        this.$nextTick(() => this.$refs.namespace.focus());
+        this.$nextTick(() => this.$refs.namespaceInput.focus());
       } else {
         this.createNamespace = false;
         this.$store.dispatch(
@@ -411,7 +431,7 @@ export default {
       class="col span-3"
     >
       <LabeledInput
-        ref="namespace"
+        ref="namespaceInput"
         v-model:value="namespace"
         :label="t('namespace.label')"
         :placeholder="t('namespace.createNamespace')"
@@ -459,9 +479,10 @@ export default {
       class="col span-3"
     >
       <LabeledInput
-        ref="name"
+        ref="nameInput"
         key="name"
         v-model:value="name"
+        data-testid="NameNsDescriptionNameInput"
         :label="t(nameLabel)"
         :placeholder="t(namePlaceholder)"
         :disabled="nameReallyDisabled"
@@ -473,7 +494,6 @@ export default {
     </div>
 
     <slot name="customize" />
-    <!-- // TODO: here goes the custom component -->
     <div
       v-show="!descriptionHidden"
       :data-testid="componentTestid + '-description'"

package/components/form/Networking.vue

@@ -29,6 +29,20 @@ export default {
 
   data() {
     const t = this.$store.getters['i18n/t'];
+
+    return {
+      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
+      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
+      hostAliases: [],
+      nameservers: null,
+      searches:    null,
+      hostname:    null,
+      subdomain:   null,
+      options:     null,
+    };
+  },
+
+  created() {
     const hostAliases = (this.value.hostAliases || []).map((entry) => {
       return {
         ip:        entry.ip,
@@ -38,18 +52,12 @@ export default {
     const { dnsConfig = {}, hostname, subdomain } = this.value;
     const { nameservers, searches, options } = dnsConfig;
 
-    const out = {
-      dnsPolicy:   this.value.dnsPolicy || 'ClusterFirst',
-      networkMode: this.value.hostNetwork ? { label: t('workload.networking.networkMode.options.hostNetwork'), value: true } : { label: t('workload.networking.networkMode.options.normal'), value: false },
-      hostAliases,
-      nameservers,
-      searches,
-      hostname,
-      subdomain,
-      options
-    };
-
-    return out;
+    this.hostAliases = hostAliases;
+    this.nameservers = nameservers;
+    this.searches = searches;
+    this.hostname = hostname;
+    this.subdomain = subdomain;
+    this.options = options;
   },
 
   computed: {

package/components/form/NodeAffinity.vue

@@ -42,31 +42,18 @@ export default {
   data() {
     // VolumeNodeAffinity only has 'required' field
     if (this.value.required) {
-      return { nodeSelectorTerms: this.value.required.nodeSelectorTerms };
     } else {
-      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
-      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
-      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
-        const neu = clone(term);
-
-        neu._id = randomStr(4);
-        if (term.preference) {
-          Object.assign(neu, term.preference);
-          delete neu.preference;
-        }
-
-        return neu;
-      });
-
-      return {
-        allSelectorTerms,
-        weightedNodeSelectorTerms: preferredDuringSchedulingIgnoredDuringExecution,
-        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)
-      };
     }
+
+    return {
+      nodeSelectorTerms:         null,
+      allSelectorTerms:          null,
+      weightedNodeSelectorTerms: null,
+      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)
+    };
   },
 
   computed: {
@@ -88,6 +75,27 @@ export default {
   },
 
   created() {
+    if (this.value.required) {
+      this.nodeSelectorTerms = this.value.required.nodeSelectorTerms;
+    } else {
+      const { preferredDuringSchedulingIgnoredDuringExecution = [], requiredDuringSchedulingIgnoredDuringExecution = {} } = this.value;
+      const { nodeSelectorTerms = [] } = requiredDuringSchedulingIgnoredDuringExecution;
+      const allSelectorTerms = [...preferredDuringSchedulingIgnoredDuringExecution, ...nodeSelectorTerms].map((term) => {
+        const neu = clone(term);
+
+        neu._id = randomStr(4);
+        if (term.preference) {
+          Object.assign(neu, term.preference);
+          delete neu.preference;
+        }
+
+        return neu;
+      });
+
+      this.allSelectorTerms = allSelectorTerms;
+      this.weightedNodeSelectorTerms = preferredDuringSchedulingIgnoredDuringExecution;
+    }
+
     this.queueUpdate = debounce(this.update, 500);
   },
 

package/components/form/NodeScheduling.vue

@@ -40,6 +40,15 @@ export default {
   },
 
   data() {
+    return {
+      selectNode:   null,
+      nodeName:     '',
+      nodeAffinity: {},
+      nodeSelector: {},
+    };
+  },
+
+  created() {
     const isHarvester = this.$store.getters['currentProduct'].inStore === VIRTUAL;
 
     let { nodeName = '' } = this.value;
@@ -65,9 +74,10 @@ export default {
       nodeAffinity['preferredDuringSchedulingIgnoredDuringExecution'] = [];
     }
 
-    return {
-      selectNode, nodeName, nodeAffinity, nodeSelector
-    };
+    this.selectNode = selectNode;
+    this.nodeName = nodeName;
+    this.nodeAffinity = nodeAffinity;
+    this.nodeSelector = nodeSelector;
   },
 
   computed: {

package/components/form/PodAffinity.vue

@@ -84,53 +84,14 @@ export default {
   },
 
   data() {
-    if (!this.value[this.field]) {
-      this.value[this.field] = {};
-    }
-    const { podAffinity = {}, podAntiAffinity = {} } = this.value[this.field];
-    const allAffinityTerms = [...(podAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
-      let out = clone(term);
-
-      out._id = randomStr(4);
-      out._anti = false;
-      if (term.podAffinityTerm) {
-        Object.assign(out, term.podAffinityTerm);
-        out = this.parsePodAffinityTerm(out);
-
-        delete out.podAffinityTerm;
-      } else {
-        out = this.parsePodAffinityTerm(out);
-      }
-
-      return out;
-    });
-    const allAntiTerms = [...(podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
-      let out = clone(term);
-
-      out._id = randomStr(4);
-      out._anti = true;
-      if (term.podAffinityTerm) {
-        Object.assign(out, term.podAffinityTerm);
-        out = this.parsePodAffinityTerm(out);
-
-        delete out.podAffinityTerm;
-      } else {
-        out = this.parsePodAffinityTerm(out);
-      }
-
-      return out;
-    });
-
-    const allSelectorTerms = [...allAffinityTerms, ...allAntiTerms];
-
     return {
-      allSelectorTerms,
-      defaultWeight:   1,
+      allSelectorTerms: [],
+      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: {
+      defaultAddValue:  {
         _namespaceOption: NAMESPACE_SELECTION_OPTION_VALUES.POD,
         matchExpressions: [],
         namespaces:       null,
@@ -138,6 +99,7 @@ export default {
       }
     };
   },
+
   computed: {
     ...mapGetters({ t: 'i18n/t' }),
     isView() {
@@ -226,6 +188,44 @@ export default {
   },
 
   created() {
+    if (!this.value[this.field]) {
+      this.value[this.field] = {};
+    }
+    const { podAffinity = {}, podAntiAffinity = {} } = this.value[this.field];
+    const allAffinityTerms = [...(podAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
+      let out = clone(term);
+
+      out._id = randomStr(4);
+      out._anti = false;
+      if (term.podAffinityTerm) {
+        Object.assign(out, term.podAffinityTerm);
+        out = this.parsePodAffinityTerm(out);
+
+        delete out.podAffinityTerm;
+      } else {
+        out = this.parsePodAffinityTerm(out);
+      }
+
+      return out;
+    });
+    const allAntiTerms = [...(podAntiAffinity.preferredDuringSchedulingIgnoredDuringExecution || []), ...(podAntiAffinity.requiredDuringSchedulingIgnoredDuringExecution || [])].map((term) => {
+      let out = clone(term);
+
+      out._id = randomStr(4);
+      out._anti = true;
+      if (term.podAffinityTerm) {
+        Object.assign(out, term.podAffinityTerm);
+        out = this.parsePodAffinityTerm(out);
+
+        delete out.podAffinityTerm;
+      } else {
+        out = this.parsePodAffinityTerm(out);
+      }
+
+      return out;
+    });
+
+    this.allSelectorTerms = [...allAffinityTerms, ...allAntiTerms];
     this.queueUpdate = debounce(this.update, 500);
   },