@rancher/shell 3.0.0 → 3.0.1-rc.2

package/directives/clean-tooltip.js

@@ -13,10 +13,10 @@ function purifyContent(value) {
   }
 }
 
-function bind(el, { value, oldValue, modifiers }) {
+function beforeMount(el, { value, oldValue, modifiers }) {
   const purifiedValue = purifyContent(value);
 
-  VTooltip.bind(
+  VTooltip.beforeMount(
     el,
     {
       value: purifiedValue, oldValue, modifiers
@@ -25,8 +25,8 @@ function bind(el, { value, oldValue, modifiers }) {
 
 const cleanTooltipDirective = {
   ...VTooltip,
-  bind,
-  update: bind,
+  beforeMount,
+  updated: beforeMount,
 };
 
 export default cleanTooltipDirective;

package/edit/constraints.gatekeeper.sh.constraint/index.vue

@@ -1,7 +1,7 @@
 <script>
 import merge from 'lodash/merge';
 import { ucFirst } from '@shell/utils/string';
-import { isSimpleKeyValue } from '@shell/utils/object';
+import { isSimpleKeyValue, set } from '@shell/utils/object';
 import { _CREATE, _VIEW } from '@shell/config/query-params';
 import { SCHEMA, NAMESPACE } from '@shell/config/types';
 import CreateEditView from '@shell/mixins/create-edit-view';
@@ -222,6 +222,9 @@ export default {
         this.value.spec.match.namespaces = [];
         this.value.spec.match.excludedNamespaces = [];
       }
+    },
+    setParameters(e) {
+      return set(this.value.spec, 'parameters', e);
     }
   }
 };
@@ -356,7 +359,7 @@ export default {
             v-model:value="parametersYaml"
             class="yaml-editor"
             :editor-mode="editorMode"
-            @newObject="$set(value.spec, 'parameters', $event)"
+            @newObject="setParameters"
           />
         </Tab>
       </Tabbed>

package/edit/logging-flow/Match.vue

@@ -2,6 +2,7 @@
 import KeyValue from '@shell/components/form/KeyValue';
 import Select from '@shell/components/form/Select';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 
 export default {
   emits: ['remove'],
@@ -39,6 +40,12 @@ export default {
     }
   },
 
+  computed: {
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === VIRTUAL;
+    },
+  },
+
   methods: {
     update() {},
 
@@ -51,19 +58,22 @@ export default {
 
 <template>
   <div>
-    <KeyValue
-      v-model:value="value.labels"
-      :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
-      :mode="mode"
-      :initial-empty-row="true"
-      :read-allowed="false"
-      :title-add="true"
-      protip=""
-      :key-label="t('logging.flow.matches.pods.keyLabel')"
-      :value-label="t('logging.flow.matches.pods.valueLabel')"
-      :add-label="t('logging.flow.matches.pods.addLabel')"
-    />
-    <div class="spacer" />
+    <template v-if="!isHarvester">
+      <KeyValue
+        v-model:value="value.labels"
+        :title="value.select ? t('logging.flow.matches.pods.title.include') : t('logging.flow.matches.pods.title.exclude')"
+        :mode="mode"
+        :initial-empty-row="true"
+        :read-allowed="false"
+        :title-add="true"
+        protip=""
+        :key-label="t('logging.flow.matches.pods.keyLabel')"
+        :value-label="t('logging.flow.matches.pods.valueLabel')"
+        :add-label="t('logging.flow.matches.pods.addLabel')"
+      />
+      <div class="spacer" />
+    </template>
+
     <h3>
       {{ value.select ? t('logging.flow.matches.nodes.title.include') : t('logging.flow.matches.nodes.title.exclude') }}
     </h3>
@@ -83,48 +93,71 @@ export default {
         />
       </div>
     </div>
-    <div class="spacer" />
-    <h3>
-      {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
-    </h3>
-    <div class="row">
-      <div class="col span-12">
-        <LabeledSelect
-          v-model:value="value.container_names"
-          :mode="mode"
-          :options="[]"
-          :disabled="false"
-          :placeholder="t('logging.flow.matches.containerNames.placeholder')"
-          :multiple="true"
-          :taggable="true"
-          :clearable="true"
-          :searchable="true"
-          :close-on-select="false"
-          no-options-label-key="logging.flow.matches.containerNames.enter"
-          placement="top"
-        />
-      </div>
-    </div>
-    <div v-if="isClusterFlow">
+    <div v-if="!isHarvester">
       <div class="spacer" />
       <h3>
-        {{ value.select ? t('logging.flow.matches.namespaces.title.include') : t('logging.flow.matches.namespaces.title.exclude') }}
+        {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
       </h3>
       <div class="row">
         <div class="col span-12">
-          <Select
-            v-model:value="value.namespaces"
-            class="lg"
-            :options="namespaces"
-            :placeholder="t('logging.flow.matches.namespaces.placeholder')"
+          <LabeledSelect
+            v-model:value="value.container_names"
+            :mode="mode"
+            :options="[]"
+            :disabled="false"
+            :placeholder="t('logging.flow.matches.containerNames.placeholder')"
             :multiple="true"
             :taggable="true"
             :clearable="true"
+            :searchable="true"
             :close-on-select="false"
+            no-options-label-key="logging.flow.matches.containerNames.enter"
             placement="top"
           />
         </div>
       </div>
+      <div v-if="isClusterFlow">
+        <div class="spacer" />
+        <h3>
+          {{ value.select ? t('logging.flow.matches.containerNames.title.include') : t('logging.flow.matches.containerNames.title.exclude') }}
+        </h3>
+        <div class="row">
+          <div class="col span-12">
+            <Select
+              v-model:value="value.namespaces"
+              class="lg"
+              :options="namespaces"
+              :placeholder="t('logging.flow.matches.namespaces.placeholder')"
+              :multiple="true"
+              :taggable="true"
+              :clearable="true"
+              :searchable="true"
+              :close-on-select="false"
+              no-options-label-key="logging.flow.matches.containerNames.enter"
+              placement="top"
+            />
+          </div>
+        </div>
+        <div class="spacer" />
+        <h3>
+          {{ value.select ? t('logging.flow.matches.namespaces.title.include') : t('logging.flow.matches.namespaces.title.exclude') }}
+        </h3>
+        <div class="row">
+          <div class="col span-12">
+            <Select
+              v-model="value.namespaces"
+              class="lg"
+              :options="namespaces"
+              :placeholder="t('logging.flow.matches.namespaces.placeholder')"
+              :multiple="true"
+              :taggable="true"
+              :clearable="true"
+              :close-on-select="false"
+              placement="top"
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>

package/edit/logging-flow/index.vue

@@ -6,20 +6,28 @@ import Loading from '@shell/components/Loading';
 import NameNsDescription from '@shell/components/form/NameNsDescription';
 import Tabbed from '@shell/components/Tabbed';
 import Tab from '@shell/components/Tabbed/Tab';
-import { LOGGING, NAMESPACE, NODE, SCHEMA } from '@shell/config/types';
+import {
+  LOGGING, NAMESPACE, NODE, POD, SCHEMA
+} from '@shell/config/types';
 import jsyaml from 'js-yaml';
 import { createYaml } from '@shell/utils/create-yaml';
 import YamlEditor, { EDITOR_MODES } from '@shell/components/YamlEditor';
 import { allHash } from '@shell/utils/promise';
-import { isArray } from '@shell/utils/array';
+import { isArray, uniq } from '@shell/utils/array';
 import { matchRuleIsPopulated } from '@shell/models/logging.banzaicloud.io.flow';
 import LabeledSelect from '@shell/components/form/LabeledSelect';
 import { clone } from '@shell/utils/object';
 import isEmpty from 'lodash/isEmpty';
 import ArrayListGrouped from '@shell/components/form/ArrayListGrouped';
 import { exceptionToErrorsArray } from '@shell/utils/error';
+import { HARVESTER_NAME as VIRTUAL } from '@shell/config/features';
 import Match from './Match';
 
+const FLOW_LOGGING = 'Logging';
+const FLOW_AUDIT = 'Audit';
+const FLOW_EVENT = 'Event';
+const FLOW_TYPE = [FLOW_LOGGING, FLOW_AUDIT, FLOW_EVENT];
+
 function emptyMatch(include = true) {
   const rule = {
     select:          !!include,
@@ -53,14 +61,17 @@ export default {
   inheritAttrs: false,
 
   async fetch() {
-    const hasAccessToClusterOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.CLUSTER_OUTPUT);
-    const hasAccessToOutputs = this.$store.getters[`cluster/schemaFor`](LOGGING.OUTPUT);
+    const currentCluster = this.$store.getters['currentCluster'];
+    const inStore = currentCluster.isHarvester ? VIRTUAL : 'cluster';
+    const hasAccessToClusterOutputs = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.CLUSTER_OUTPUT);
+    const hasAccessToOutputs = this.$store.getters[`${ inStore }/schemaFor`](LOGGING.OUTPUT);
     const hasAccessToNamespaces = this.$store.getters[`cluster/schemaFor`](NAMESPACE);
-    const hasAccessToNodes = this.$store.getters[`cluster/schemaFor`](NODE);
+    const hasAccessToNodes = this.$store.getters[`${ inStore }/schemaFor`](NODE);
+    const hasAccessToPods = this.$store.getters[`${ inStore }/schemaFor`](POD);
     const isFlow = this.value.type === LOGGING.FLOW;
 
     const getAllOrDefault = (type, hasAccess) => {
-      return hasAccess ? this.$store.dispatch('cluster/findAll', { type }) : Promise.resolve([]);
+      return hasAccess ? this.$store.dispatch(`${ inStore }/findAll`, { type }) : Promise.resolve([]);
     };
 
     const hash = await allHash({
@@ -68,6 +79,7 @@ export default {
       allClusterOutputs: getAllOrDefault(LOGGING.CLUSTER_OUTPUT, hasAccessToClusterOutputs),
       allNamespaces:     getAllOrDefault(NAMESPACE, hasAccessToNamespaces),
       allNodes:          getAllOrDefault(NODE, hasAccessToNodes),
+      allPods:           getAllOrDefault(POD, hasAccessToPods),
     });
 
     for ( const k of Object.keys(hash) ) {
@@ -76,7 +88,9 @@ export default {
   },
 
   data() {
-    const schemas = this.$store.getters['cluster/all'](SCHEMA);
+    const currentCluster = this.$store.getters['currentCluster'];
+    const inStore = currentCluster.isHarvester ? VIRTUAL : 'cluster';
+    const schemas = this.$store.getters[`${ inStore }/all`](SCHEMA);
     let filtersYaml;
 
     this.value.spec = this.value.spec || {};
@@ -124,7 +138,8 @@ export default {
       filtersYaml,
       initialFiltersYaml: filtersYaml,
       globalOutputRefs,
-      localOutputRefs
+      localOutputRefs,
+      loggingType:        clone(this.value.loggingType || FLOW_LOGGING)
     };
   },
 
@@ -150,7 +165,17 @@ export default {
           return true;
         }
 
-        return output.namespace === this.value.namespace;
+        const isEqualNs = output.namespace === this.value.namespace;
+
+        if (!this.isHarvester) {
+          return isEqualNs;
+        }
+
+        if (this.loggingType === FLOW_AUDIT) {
+          return output.loggingType === FLOW_AUDIT && isEqualNs;
+        }
+
+        return output.loggingType !== FLOW_AUDIT && isEqualNs;
       }).map((x) => {
         return { label: x.metadata.name, value: x.metadata.name };
       });
@@ -165,7 +190,17 @@ export default {
 
       return this.allClusterOutputs
         .filter((clusterOutput) => {
-          return clusterOutput.namespace === 'cattle-logging-system';
+          const isEqualNs = clusterOutput.namespace === 'cattle-logging-system';
+
+          if (!this.isHarvester) {
+            return isEqualNs;
+          }
+
+          if (this.loggingType === FLOW_AUDIT) {
+            return clusterOutput.loggingType === FLOW_AUDIT && isEqualNs;
+          }
+
+          return clusterOutput.loggingType !== FLOW_AUDIT && isEqualNs;
         })
         .map((clusterOutput) => {
           return { label: clusterOutput.metadata.name, value: clusterOutput.metadata.name };
@@ -204,6 +239,25 @@ export default {
       return out;
     },
 
+    containerChoices() {
+      const out = [];
+
+      for ( const pod of this.allPods ) {
+        for ( const c of (pod.spec?.containers || []) ) {
+          out.push(c.name);
+        }
+      }
+
+      return uniq(out).sort();
+    },
+
+    isHarvester() {
+      return this.$store.getters['currentProduct'].inStore === VIRTUAL;
+    },
+
+    flowTypeOptions() {
+      return FLOW_TYPE;
+    },
   },
 
   watch: {
@@ -312,6 +366,20 @@ export default {
       if (this.value.spec.match && this.isMatchEmpty(this.value.spec.match)) {
         delete this.value.spec['match'];
       }
+
+      if (this.loggingType === FLOW_AUDIT) {
+        this.value.spec['loggingRef'] = 'harvester-kube-audit-log-ref';
+      }
+
+      if (this.loggingType === FLOW_EVENT) {
+        const eventSelector = { select: { labels: { 'app.kubernetes.io/name': 'event-tailer' } } };
+
+        if (!this.value.spec.match) {
+          this.value.spec['match'] = [eventSelector];
+        } else {
+          this.value.spec.match.push(eventSelector);
+        }
+      }
     },
     onYamlEditorReady(cm) {
       cm.getMode().fold = 'yamlcomments';
@@ -359,10 +427,21 @@ export default {
         :weight="3"
       >
         <Banner
+          v-if="!isHarvester"
           color="info"
           class="mt-0"
           :label="t('logging.flow.matches.banner')"
         />
+        <div v-if="isHarvester">
+          <LabeledSelect
+            v-model:value="loggingType"
+            class="mb-20"
+            :options="flowTypeOptions"
+            :mode="mode"
+            :disabled="!isCreate"
+            :label="t('generic.type')"
+          />
+        </div>
         <ArrayListGrouped
           v-model:value="matches"
           :add-label="t('ingress.rules.addRule')"

package/edit/logging.banzaicloud.io.output/index.vue

@@ -199,13 +199,13 @@ export default {
         v-if="hasMultipleProvidersSelected"
         color="info"
       >
-        This output is configured with multiple providers. We currently only support a single provider per output. You can view or edit the YAML.
+        {{ t('logging.output.tips.singleProvider') }}
       </Banner>
       <Banner
         v-else-if="!value.allProvidersSupported"
         color="info"
       >
-        This output is configured with providers we don't support yet. You can view or edit the YAML.
+        {{ t('logging.output.tips.multipleProviders') }}
       </Banner>
       <Tabbed
         v-else

package/edit/management.cattle.io.project.vue

@@ -52,7 +52,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(['currentCluster']),
+    ...mapGetters(['currentCluster', 'isStandaloneHarvester']),
 
     canViewMembers() {
       return canViewProjectMembershipEditor(this.$store);
@@ -222,7 +222,7 @@ export default {
         <ResourceQuota
           :value="value"
           :mode="canEditTabElements"
-          :types="isHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
+          :types="isStandaloneHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
           @remove="removeQuota"
         />
       </Tab>

package/edit/namespace.vue

@@ -15,9 +15,9 @@ import MoveModal from '@shell/components/MoveModal';
 import ResourceQuota from '@shell/components/form/ResourceQuota/Namespace';
 import Loading from '@shell/components/Loading';
 import { HARVESTER_TYPES, RANCHER_TYPES } from '@shell/components/form/ResourceQuota/shared';
-import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 import Labels from '@shell/components/form/Labels';
 import { randomStr } from '@shell/utils/string';
+import { HARVESTER_NAME as HARVESTER } from '@shell/config/features';
 
 export default {
   emits:      ['input'],

package/edit/provisioning.cattle.io.cluster/__tests__/DirectoryConfig.test.ts

@@ -113,7 +113,7 @@ describe('component: DirectoryConfig', () => {
     expect(wrapper.vm.value.k8sDistro).toStrictEqual(k8sDistroValue);
   });
 
-  it('should render the component with configuration being an empty object, without errors and radio be of value DATA_DIR_RADIO_OPTIONS.DEFAULT (edit scenario)', () => {
+  it('should render the component with configuration being an empty object, without errors and radio be of value DATA_DIR_RADIO_OPTIONS.CUSTOM (edit scenario)', () => {
     const newMountOptions = clone(mountOptions);
 
     newMountOptions.propsData.value = {};
@@ -131,17 +131,21 @@ describe('component: DirectoryConfig', () => {
     const k8sDistroInput = wrapper.find('[data-testid="rke2-directory-config-k8sDistro-data-dir"]');
 
     expect(title.exists()).toBe(true);
-    expect(radioInput.exists()).toBe(true);
+    expect(radioInput.isVisible()).toBe(false);
 
-    expect(wrapper.vm.dataConfigRadioValue).toBe(DATA_DIR_RADIO_OPTIONS.DEFAULT);
+    expect(wrapper.vm.dataConfigRadioValue).toBe(DATA_DIR_RADIO_OPTIONS.CUSTOM);
 
     // since we have all of the vars empty, then the inputs should not be there
-    expect(systemAgentInput.exists()).toBe(false);
-    expect(provisioningInput.exists()).toBe(false);
-    expect(k8sDistroInput.exists()).toBe(false);
+    expect(systemAgentInput.exists()).toBe(true);
+    expect(provisioningInput.exists()).toBe(true);
+    expect(k8sDistroInput.exists()).toBe(true);
+
+    expect(systemAgentInput.attributes().disabled).toBeDefined();
+    expect(provisioningInput.attributes().disabled).toBeDefined();
+    expect(k8sDistroInput.attributes().disabled).toBeDefined();
   });
 
-  it('radio input should be set to DATA_DIR_RADIO_OPTIONS.CUSTOM with all data dir values existing and different (edit scenario)', async() => {
+  it('radio input should be set to DATA_DIR_RADIO_OPTIONS.CUSTOM with all data dir values existing and different (edit scenario)', () => {
     const newMountOptions = clone(mountOptions);
     const inputPath = 'some-data-dir';
 
@@ -157,14 +161,20 @@ describe('component: DirectoryConfig', () => {
 
     expect(wrapper.vm.dataConfigRadioValue).toBe(DATA_DIR_RADIO_OPTIONS.CUSTOM);
 
+    const radioInput = wrapper.find('[data-testid="rke2-directory-config-radio-input"]');
     const systemAgentInput = wrapper.find('[data-testid="rke2-directory-config-systemAgent-data-dir"]');
     const provisioningInput = wrapper.find('[data-testid="rke2-directory-config-provisioning-data-dir"]');
     const k8sDistroInput = wrapper.find('[data-testid="rke2-directory-config-k8sDistro-data-dir"]');
 
+    expect(radioInput.isVisible()).toBe(false);
     expect(systemAgentInput.isVisible()).toBe(true);
     expect(provisioningInput.isVisible()).toBe(true);
     expect(k8sDistroInput.isVisible()).toBe(true);
 
+    expect(systemAgentInput.attributes().disabled).toBeDefined();
+    expect(provisioningInput.attributes().disabled).toBeDefined();
+    expect(k8sDistroInput.attributes().disabled).toBeDefined();
+
     expect(wrapper.vm.value.systemAgent).toStrictEqual(`${ inputPath }/${ DEFAULT_SUBDIRS.AGENT }`);
     expect(wrapper.vm.value.provisioning).toStrictEqual(`${ inputPath }/${ DEFAULT_SUBDIRS.PROVISIONING }`);
     expect(wrapper.vm.value.k8sDistro).toStrictEqual(`${ inputPath }/${ DEFAULT_SUBDIRS.K8S_DISTRO_K3S }`);

package/edit/provisioning.cattle.io.cluster/index.vue

@@ -211,8 +211,9 @@ export default {
 
     emberLink() {
       if (this.value) {
+        // set subtype if editing EKS/GKE/AKS cluster -- this ensures that the component provided by extension is loaded instead of iframing old ember ui
         if (this.value.provisioner) {
-          const matchingSubtype = this.subTypes.find((st) => st.id.toLowerCase() === this.value.provisioner.toLowerCase() || DRIVER_TO_IMPORT[st.id.toLowerCase()] === this.value.provisioner.toLowerCase());
+          const matchingSubtype = this.subTypes.find((st) => DRIVER_TO_IMPORT[st.id.toLowerCase()] === this.value.provisioner.toLowerCase());
 
           if (matchingSubtype) {
             this.selectType(matchingSubtype.id, false);

package/edit/provisioning.cattle.io.cluster/rke2.vue

@@ -65,14 +65,12 @@ import Advanced from '@shell/edit/provisioning.cattle.io.cluster/tabs/Advanced';
 import { DEFAULT_COMMON_BASE_PATH, DEFAULT_SUBDIRS } from '@shell/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig';
 import ClusterAppearance from '@shell/components/form/ClusterAppearance';
 import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest';
-import VsphereUtils from '@shell/utils/v-sphere';
+import VsphereUtils, { VMWARE_VSPHERE } from '@shell/utils/v-sphere';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
-const VMWARE_VSPHERE = 'vmwarevsphere';
-
 /**
  * Classes to be adopted by the node badges in Machine pools
  */

package/edit/provisioning.cattle.io.cluster/tabs/DirectoryConfig.vue

@@ -1,8 +1,9 @@
 
 <script>
 import { LabeledInput } from '@components/Form/LabeledInput';
-import { _CREATE } from '@shell/config/query-params';
+import { _CREATE, _EDIT } from '@shell/config/query-params';
 import RadioGroup from '@components/Form/Radio/RadioGroup.vue';
+import { Banner } from '@components/Banner';
 
 export const DATA_DIR_RADIO_OPTIONS = {
   DEFAULT: 'defaultDataDir',
@@ -23,7 +24,8 @@ export default {
   name:       'DirectoryConfig',
   components: {
     LabeledInput,
-    RadioGroup
+    RadioGroup,
+    Banner
   },
   props: {
     mode: {
@@ -50,9 +52,7 @@ export default {
     }
 
     if (this.mode !== _CREATE) {
-      if (this.value?.systemAgent?.length || this.value?.provisioning?.length || this.value?.k8sDistro?.length) {
-        dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
-      }
+      dataConfigRadioValue = DATA_DIR_RADIO_OPTIONS.CUSTOM;
     }
 
     return {
@@ -85,6 +85,9 @@ export default {
     }
   },
   computed: {
+    isDisabled() {
+      return this.mode === _EDIT;
+    },
     dataConfigRadioOptions() {
       const defaultDataDirOption = {
         value: DATA_DIR_RADIO_OPTIONS.DEFAULT,
@@ -148,10 +151,17 @@ export default {
 <template>
   <div class="row">
     <div class="col span-8">
-      <h3 class="mb-20">
+      <h3>
         {{ t('cluster.directoryConfig.title') }}
       </h3>
+      <Banner
+        class="mb-20"
+        :closable="false"
+        color="info"
+        label-key="cluster.directoryConfig.banner"
+      />
       <RadioGroup
+        v-show="!isDisabled"
         :value="dataConfigRadioValue"
         class="mb-10"
         :mode="mode"
@@ -167,6 +177,7 @@ export default {
         :mode="mode"
         :label="t('cluster.directoryConfig.common.label')"
         :tooltip="t('cluster.directoryConfig.common.tooltip')"
+        :disabled="isDisabled"
         data-testid="rke2-directory-config-common-data-dir"
       />
       <div v-if="dataConfigRadioValue === DATA_DIR_RADIO_OPTIONS.CUSTOM">
@@ -176,6 +187,7 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.systemAgent.label')"
           :tooltip="t('cluster.directoryConfig.systemAgent.tooltip')"
+          :disabled="isDisabled"
           data-testid="rke2-directory-config-systemAgent-data-dir"
         />
         <LabeledInput
@@ -184,6 +196,7 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.provisioning.label')"
           :tooltip="t('cluster.directoryConfig.provisioning.tooltip')"
+          :disabled="isDisabled"
           data-testid="rke2-directory-config-provisioning-data-dir"
         />
         <LabeledInput
@@ -192,6 +205,7 @@ export default {
           :mode="mode"
           :label="t('cluster.directoryConfig.k8sDistro.label')"
           :tooltip="t('cluster.directoryConfig.k8sDistro.tooltip')"
+          :disabled="isDisabled"
           data-testid="rke2-directory-config-k8sDistro-data-dir"
         />
       </div>

package/edit/provisioning.cattle.io.cluster/tabs/registries/RegistryMirrors.vue

@@ -90,7 +90,7 @@ export default {
       :default-add-value="defaultAddValue"
       :initial-empty-row="true"
       :mode="mode"
-      @input="update"
+      @update:value="update"
     >
       <template #default="{row}">
         <div class="row">