@rancher/shell 2.0.0 → 3.0.0-rc.1

package/assets/styles/global/_labeled-input.scss

@@ -24,6 +24,7 @@
     color: var(--input-label);
     pointer-events: none;
     width: calc(100% - 20px);
+
     i {
       pointer-events: initial;
     }
@@ -43,7 +44,8 @@
     color: var(--error);
   }
 
-  INPUT, SELECT {
+  INPUT,
+  SELECT {
     position: relative;
     font-size: 14px;
     display: block;
@@ -59,9 +61,15 @@
     user-select: none;
   }
 
-  INPUT, INPUT:hover, INPUT:focus,
-  TEXTAREA, TEXTAREA:hover, TEXTAREA:focus,
-  SELECT, SELECT:hover, SELECT:focus {
+  INPUT,
+  INPUT:hover,
+  INPUT:focus,
+  TEXTAREA,
+  TEXTAREA:hover,
+  TEXTAREA:focus,
+  SELECT,
+  SELECT:hover,
+  SELECT:focus {
     border: none;
     background-color: transparent;
     outline: 0;
@@ -74,18 +82,19 @@
     }
   }
 
-  &.view > DIV:not(.addon) {
+  &.view>DIV:not(.addon) {
     font-size: 14px;
     padding: $input-padding-lg 0 0 0;
 
     &.no-label {
-      padding-top:0px;
+      padding-top: 0px;
     }
   }
 
   &.create,
   &.edit,
   &.view {
+
     .addon,
     .addon.btn {
       display: table-cell;
@@ -110,15 +119,16 @@
     padding-right: 8px;
   }
 
-  &.suffix.has-tooltip INPUT {
+  &.suffix.v-popper--has-tooltip INPUT {
     width: calc(100% - 30px);
   }
 
-  &.suffix.has-tooltip INPUT {
+  &.suffix.v-popper--has-tooltip INPUT {
     width: calc(100% - 30px);
   }
 
-  .cron-label, .sub-label {
+  .cron-label,
+  .sub-label {
     position: absolute;
     top: 100%;
     width: 100%;
@@ -128,10 +138,11 @@
     pointer-events: initial;
   }
 
-  .validation-message, .sub-label.validation-message {
+  .validation-message,
+  .sub-label.validation-message {
     color: var(--error);
   }
 
 
 
-}
+}

package/assets/styles/global/_layout.scss

@@ -119,15 +119,15 @@ HEADER {
 }
 
 .localeSelector {
-  ::v-deep .popover-inner {
+  :deep(.popover-inner) {
     padding: 50px 0;
   }
 
-  ::v-deep .popover-arrow {
+  :deep(.popover-arrow) {
     display: none;
   }
 
-  ::v-deep .popover:focus {
+  :deep(.popover:focus) {
     outline: 0;
   }
 
@@ -152,4 +152,4 @@ HEADER {
   opacity: 1;
 }
 
-// !END
+// !END

package/assets/styles/global/_tooltip.scss

@@ -174,7 +174,8 @@
   display: inline;
 }
 
-.tooltip, .popover {
+.tooltip,
+.popover {
   &[aria-hidden='true'] {
     // This removes it from the layout of ButtondropDown (so it doesn't render huge for SSR) but
     // still allows it to maintain it's dimensions for v-tooltip to calculate the appropriate position.
@@ -192,6 +193,6 @@
 }
 
 //icon tooltip
-.icon-info.has-tooltip {
+.icon-info.v-popper--has-tooltip {
   font-size: 14px;
-}
+}

package/assets/translations/en-us.yaml

@@ -507,6 +507,11 @@ authConfig:
     UID: UID Field
     adfs: Configure an AD FS account
     api: '{vendor} API Host'
+    sloTitle: Log Out behavior
+    sloOptions:
+      onlyRancher: Log out of Rancher and not {name}
+      logoutAll: Log out of Rancher and {name} (includes all other applications registered with {name})
+      choose: Allow the user to choose one of the above in an additional log out step
     cert:
       label: Certificate
       placeholder: Paste in the certificate, starting with -----BEGIN CERTIFICATE-----
@@ -572,7 +577,7 @@ authConfig:
         title: Are you sure? This update is irreversible.
         body: '<p><b>You may need to make some additional changes</b>. Please ensure the Azure AD app has the Directory.Read.All <b>Application</b> permission added to Microsoft Graph.<br> If any endpoints were customized while configuring Azure AD authentication in Rancher, they will not be automatically updated. </p>'
   oidc:
-    oidc: Configure an OIDC account
+    genericoidc: Configure an OIDC account
     keycloakoidc: Configure a Keycloak OIDC account
     rancherUrl: Rancher URL
     clientId: Client ID
@@ -1782,7 +1787,9 @@ cluster:
     rke2-k3-reprovisioning: 'Making changes to cluster configuration may result in nodes reprovisioning. For more information see the <a href="{docsBase}/how-to-guides/new-user-guides/launch-kubernetes-with-rancher/rke1-vs-rke2-differences#cluster-api" target="_blank" rel="noopener nofollow">documentation</a>.'
     desiredNodeGroupWarning: There are 0 nodes available to run the cluster agent. The cluster will not become active until at least one node is available.
     haveArgInfo: Configuration information is not available for the selected Kubernetes version.  The options available on this screen will be limited; you may want to use the YAML editor.
-    cloudProviderAddConfig: 'On Kubernetes 1.27 or greater, the Amazon Cloud Provider requires additional configuration. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/amazon" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
+    cloudProviderAddConfig: 'On Kubernetes 1.27 or greater, the <b>Amazon</b> Cloud Provider requires additional configuration. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/amazon" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
+    cloudProviderUnsupportedAzure: 'On Kubernetes 1.30 or greater, the <b>Azure</b> Cloud Provider has been removed. See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/azure" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
+    cloudProviderMigrateAzure: 'On Kubernetes 1.30 or greater, the <b>Azure</b> Cloud Provider has been removed. To upgrade Kubernetes, the cluster should be migrated to External provider first.<br> See <a href="https://ranchermanager.docs.rancher.com/how-to-guides/new-user-guides/kubernetes-clusters-in-rancher-setup/set-up-cloud-providers/azure" target="_blank" rel="noopener noreferrer nofollow">the documentation</a> for more information.'
     machinePoolError: |-
       {count, plural,
         =1 { {pool_name}: The provided value for {fields} was not found in the list of expected values. This can happen with clusters provisioned outside of Rancher or when options for the provider have changed. }
@@ -2225,7 +2232,22 @@ drivers:
     refresh: Refresh Kubernetes Metadata
   deactivate:
     title: Are you sure?
-    warning: You will no longer be able to edit the configuration of clusters using {name} driver. Resources in the provider will not be automatically removed.
+    andOthers: |-
+      {count, plural,
+      =0 {}
+      =1 { and <b>one other </b>}
+      other { and <b>{count} other </b>}
+      }
+    warningDrivers: |-
+      {count, plural,
+      =1 { You will no longer be able to edit the configuration of clusters using {names} driver.}
+      other { You will no longer be able to edit the configuration of clusters using {names} drivers.}
+      }
+    warning: |-
+      {count, plural,
+      =1 { {warningDrivers} Resources in the corresponding provider will not be automatically removed.}
+      other { {warningDrivers} Resources in the corresponding providers will not be automatically removed.}
+      }
 
 detailText:
   collapse: Hide
@@ -3248,6 +3270,7 @@ login:
   welcome: Welcome to {vendor}
   loggedOut: You have been logged out.
   loggedOutFromSso: You've been logged out of Rancher, however you may still be logged in to your single sign-on identity provider.
+  loggedOutFromSlo: You've been logged out of Rancher and from your single sign-on identity provider.
   loginAgain: Log in again to continue.
   serverError:
     authFailedCreds: "Logging in failed: Check credentials, or your account may not be authorized to log in."
@@ -3272,6 +3295,10 @@ login:
 
 logout:
   message: Logging Out...
+  error: 'An error occurred logging out: {msg}'
+  specificError:
+    unknown: Unknown.\n\nPlease contact your system administrator.
+    500: "Server-side error.\n\nPlease contact your system administrator."
 
 managementNode:
   customName: Custom Name
@@ -4631,6 +4658,15 @@ promptScaleMachineDown:
   retainedMachine1: At least one Machine must exist for roles Control Plane and Etcd.
   retainedMachine2: <b>{ name }</b> will remain
 
+promptSlo:
+  title: "Log out"
+  text: "Log out of only Rancher, or all {name} applications."
+  rancher:
+    active: Only log out of Rancher
+  all:
+    active: Log out of {name}
+    waiting: Logging Out
+
 promptRemove:
   title: Are you sure?
   andOthers: |-
@@ -6582,7 +6618,7 @@ model:
       okta: Okta
       freeipa: FreeIPA
       googleoauth: Google
-      oidc: Generic OIDC
+      genericoidc: Generic OIDC
       keycloakoidc: Keycloak
 
   cluster:
@@ -7387,7 +7423,7 @@ performance:
       When enabled, resources will appear more quickly, but it may take slightly longer to load the entire set of resources. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable incremental loading
     inputLabel: Resource Threshold
-    incompatibleDescription: "Incremental Loading is incomaptible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
+    incompatibleDescription: "Incremental Loading is incompatible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
   manualRefresh:
     label: Manual Refresh
     setting: You can configure a threshold above which manual refresh will be enabled.
@@ -7396,7 +7432,7 @@ performance:
       When enabled, list data will not auto-update but instead the user must manually trigger a list-view refresh. This setting only applies to resources that come from the Kubernetes API
     checkboxLabel: Enable manual refresh of data for lists
     inputLabel: Resource Threshold
-    incompatibleDescription: "Manual Refresh is incomaptible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
+    incompatibleDescription: "Manual Refresh is incompatible with Namespace/Project filtering and Server-side Pagination. Enabling this will disable them."
   websocketNotification:
     label: Websocket Notifications
     description: |-
@@ -7427,7 +7463,7 @@ performance:
     label: Require Namespace / Project Filtering
     description: Require the user to select namespaces and/or projects. This restricts the number of resources fetched when viewing lists and should help the responsiveness of the UI in systems with a lot of resources.
     checkboxLabel: Enable Required Namespace / Project Filtering
-    incompatibleDescription: "Required Namespace / Project Filtering is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
+    incompatibleDescription: "Required Namespace / Project Filtering is incompatible with Manual Refresh and Incremental Loading. Enabling this will disable them."
   advancedWorker:
     label: Websocket Web Worker
     description: Updates to resources pushed to the UI come via WebSocket and are handled in the UI thread. Enable this option to handle cluster WebSocket updates in a Web Worker in a separate thread. This should help the responsiveness of the UI in systems where resources change often.
@@ -7444,7 +7480,7 @@ performance:
     description: By default Lists will fetch all resources and paginate in the browser (create the page given sorting and filtering settings). Change this setting to enable pagination server-side. This should help the responsiveness of the UI in systems with a lot of resources.
     checkboxLabel: Enable Server-side Pagination
     applicable: "This applies to the following resource types"
-    incompatibleDescription: "Server-side Pagination is incomaptible with Manual Refresh and Incremental Loading. Enabling this will disable them."
+    incompatibleDescription: "Server-side Pagination is incompatible with Manual Refresh and Incremental Loading. Enabling this will disable them."
     featureFlag: The&nbsp;<a href="{ffUrl}">Feature Flag</a>&nbsp;`ui-sql-cache` must be enabled to use this feature
     resources:
       generic: most resources in the cluster's 'More Resources' section

package/chart/__tests__/S3.test.ts

@@ -1,13 +1,10 @@
+import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
-import { mount, createLocalVue } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
 import S3 from '@shell/chart/rancher-backup/S3';
 import Vuex from 'vuex';
 
-const localVue = createLocalVue();
-
-localVue.use(Vuex);
-
 describe('rancher-backup: S3', () => {
   const mockStore = {
     getters: {
@@ -17,7 +14,10 @@ describe('rancher-backup: S3', () => {
       'cluster/paginationEnabled': () => false
     }
   };
-  const wrapper = mount(S3, { mocks: { $store: mockStore, $fetchState: { pending: false } } });
+  const wrapper = mount(S3, {
+    plugins: [Vuex],
+    global:  { mocks: { $store: mockStore, $fetchState: { pending: false } } }
+  });
 
   it('should emit invalid when form is not filled', () => {
     expect(wrapper.emitted('valid')).toHaveLength(1);
@@ -25,8 +25,6 @@ describe('rancher-backup: S3', () => {
   });
 
   it('should emit valid when required fields are filled', async() => {
-    const bucketName = wrapper.find('[data-testid="S3-bucketName"]').find('input');
-    const endpoint = wrapper.find('[data-testid="S3-endpoint"]').find('input');
     const testCases = [
       {
         bucketNameInput: 'val',
@@ -41,16 +39,25 @@ describe('rancher-backup: S3', () => {
     ];
 
     for (const testCase of testCases) {
-      bucketName.setValue(testCase.bucketNameInput);
-      endpoint.setValue(testCase.endpointInput);
-      await wrapper.vm.$nextTick();
+      wrapper.setProps({
+        value: {
+          bucketName: testCase.bucketNameInput,
+          endpoint:   testCase.endpointInput
+        }
+      });
+
+      await nextTick();
       expect(wrapper.emitted('valid')).toHaveLength(1);
       expect(wrapper.emitted('valid')![0][0]).toBe(false);
     }
 
-    bucketName.setValue('val1');
-    endpoint.setValue('val2');
-    await wrapper.vm.$nextTick();
+    wrapper.setProps({
+      value: {
+        bucketName: 'val1',
+        endpoint:   'val2'
+      }
+    });
+    await nextTick();
     expect(wrapper.emitted('valid')).toHaveLength(2);
     expect(wrapper.emitted('valid')![1][0]).toBe(true);
   });

package/chart/example.vue

@@ -14,5 +14,5 @@ export default {
 </script>
 
 <template>
-  <LabeledInput v-model="value.foo" />
+  <LabeledInput v-model:value="value.foo" />
 </template>

package/chart/gatekeeper.vue

@@ -30,7 +30,7 @@ export default {
       set(values) {
         const crdInfo = this.autoInstallInfo.find((info) => info.chart.name.includes('crd'));
 
-        this.$set(crdInfo, 'allValues', values);
+        crdInfo['allValues'] = values;
       }
     }
   }
@@ -41,7 +41,7 @@ export default {
     <div class="row">
       <div class="col span-6">
         <UnitInput
-          v-model="value.auditInterval"
+          v-model:value="value.auditInterval"
           :label="t('gatekeeperInstall.auditInterval')"
           :suffix="t('suffix.seconds', {count: value.auditInterval})"
         />
@@ -50,7 +50,7 @@ export default {
     <div class="row mt-10">
       <div class="col span-6">
         <UnitInput
-          v-model="value.constraintViolationsLimit"
+          v-model:value="value.constraintViolationsLimit"
           :label="t('gatekeeperInstall.constraintViolationsLimit')"
           :suffix="t('gatekeeperIndex.violations')"
         />
@@ -61,7 +61,7 @@ export default {
       <!-- gatekeeper versions <1.0.2 do not have this option -->
       <Checkbox
         v-if="crdValues.enableRuntimeDefaultSeccompProfile ||crdValues.enableRuntimeDefaultSeccompProfile === false"
-        v-model="crdValues.enableRuntimeDefaultSeccompProfile"
+        v-model:value="crdValues.enableRuntimeDefaultSeccompProfile"
         :label="t('gatekeeperInstall.runtimeDefaultSeccompProfile')"
       />
     </template>

package/chart/istio.vue

@@ -104,7 +104,7 @@ export default {
 
   methods: {
     update() {
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     },
 
     valuesChanged(value) {
@@ -147,9 +147,9 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.cni.enabled"
+          v-model:value="value.cni.enabled"
           :label="t('istio.cni')"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -157,7 +157,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.ingressGateways.enabled"
+          v-model:value="value.ingressGateways.enabled"
           :label="t('istio.ingressGateway')"
         />
       </div>
@@ -166,7 +166,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.egressGateways.enabled"
+          v-model:value="value.egressGateways.enabled"
           :label="t('istio.egressGateway')"
         />
       </div>
@@ -177,7 +177,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.pilot.enabled"
+          v-model:value="value.pilot.enabled"
           :label="t('istio.pilot')"
           :disabled="value.kiali && value.kiali.enabled"
         />
@@ -187,7 +187,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.policy.enabled"
+          v-model:value="value.policy.enabled"
           :label="t('istio.policy')"
         />
       </div>
@@ -196,7 +196,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.telemetry.enabled"
+          v-model:value="value.telemetry.enabled"
           :label="t('istio.telemetry')"
         />
       </div>
@@ -207,9 +207,9 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.kiali.enabled"
+          v-model:value="value.kiali.enabled"
           :label="t('istio.kiali')"
-          @input="changeKiali"
+          @update:value="changeKiali"
         />
       </div>
       <div
@@ -217,7 +217,7 @@ export default {
         class="col span-4"
       >
         <Checkbox
-          v-model="value.tracing.enabled"
+          v-model:value="value.tracing.enabled"
           :label="t('istio.tracing')"
         />
       </div>

package/chart/logging/index.vue

@@ -28,10 +28,10 @@ export default {
       // Save a note so that form -> yaml -> form doesn't reset these
       Object.defineProperty(this.value, '_setSources', { enumerable: false, value: true });
 
-      this.$set(this.value, 'additionalLoggingSources', this.value.additionalLoggingSources || {});
-      this.$set(this.value.additionalLoggingSources, provider, this.value.additionalLoggingSources[provider] || {});
-      this.$set(this.value.additionalLoggingSources[provider], 'enabled', true);
-      this.$set(this.value, 'global', this.value.global || {});
+      this.value['additionalLoggingSources'] = this.value.additionalLoggingSources || {};
+      this.value.additionalLoggingSources[provider] = this.value.additionalLoggingSources[provider] || {};
+      this.value.additionalLoggingSources[provider]['enabled'] = true;
+      this.value['global'] = this.value.global || {};
     }
   },
 };
@@ -45,7 +45,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="value.additionalLoggingSources.k3s.container_engine"
+          v-model:value="value.additionalLoggingSources.k3s.container_engine"
           :label="t('logging.install.k3sContainerEngine')"
         />
       </div>
@@ -53,7 +53,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.global.dockerRootDirectory"
+          v-model:value="value.global.dockerRootDirectory"
           :label="t('logging.install.dockerRootDirectory')"
         />
       </div>
@@ -61,7 +61,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.systemdLogPath"
+          v-model:value="value.systemdLogPath"
           :placeholder="t('logging.install.default')"
           :label="t('logging.install.systemdLogPath')"
           :tooltip="t('logging.install.tooltip', {}, true)"
@@ -75,7 +75,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <Checkbox
-          v-model="value.additionalLoggingSources[provider].enabled"
+          v-model:value="value.additionalLoggingSources[provider].enabled"
           :label="t('logging.install.enableAdditionalLoggingSources')"
         />
       </div>

package/chart/monitoring/ClusterSelector.vue

@@ -115,7 +115,7 @@ export default {
     // This method is not that dissimilar to persistentStorageType in Grafana config
     // The reason for the divergence is that Grafana has a subkey on the chart
     // where these keys are at the root of the chart. Vue complains about calling
-    // this.$set(this, 'value', obj) as we need to do here to reset the values in bulk.
+    // this['value'] = obj as we need to do here to reset the values in bulk.
     // So rather than call each set on each line individually I give you this.
     clusterType(clusterType, oldClusterType) {
       if (isEmpty(clusterType)) {
@@ -131,16 +131,16 @@ export default {
 
         if (oldClusterType.group === 'managed') {
           if (oldClusterType.id === 'gke') {
-            this.$set(this.value.coreDns, 'enabled', true);
-            this.$set(this.value.kubeDns, 'enabled', false);
+            this.value.coreDns['enabled'] = true;
+            this.value.kubeDns['enabled'] = false;
           }
         } else if (oldClusterType.group !== 'other') { // old cluster type only sets some values to false, if they need to be reset true it will happen below
           this.setClusterTypeEnabledValues([oldConfigKeys, false]);
         }
 
         if (oldClusterType.group === 'k3s') {
-          this.$set(this.value.prometheus.prometheusSpec.resources.limits, 'memory', '1500Mi');
-          this.$set(this.value.prometheus.prometheusSpec.resources.requests, 'memory', '750Mi');
+          this.value.prometheus.prometheusSpec.resources.limits['memory'] = '1500Mi';
+          this.value.prometheus.prometheusSpec.resources.requests['memory'] = '750Mi';
         }
       }
       const { configKeys } = findBy(this.clusterTypes, 'id', clusterType.id);
@@ -151,21 +151,21 @@ export default {
         this.setClusterTypeEnabledValues([configKeys, false]);
 
         if (clusterType.id === 'gke') {
-          this.$set(this.value.coreDns, 'enabled', false);
-          this.$set(this.value.kubeDns, 'enabled', true);
+          this.value.coreDns['enabled'] = false;
+          this.value.kubeDns['enabled'] = true;
         }
       } else {
         this.setClusterTypeEnabledValues([configKeys, true]);
       }
 
       if (clusterType.group === 'k3s') {
-        this.$set(this.value.prometheus.prometheusSpec.resources.limits, 'memory', '3000Mi');
-        this.$set(this.value.prometheus.prometheusSpec.resources.requests, 'memory', '1750Mi');
+        this.value.prometheus.prometheusSpec.resources.limits['memory'] = '3000Mi';
+        this.value.prometheus.prometheusSpec.resources.requests['memory'] = '1750Mi';
       }
 
       if (clusterType.id === 'rke.windows') {
         if (!this.value.global.cattle.windows) {
-          this.$set(this.value.global.cattle, 'windows', { enabled: true });
+          this.value.global.cattle['windows'] = { enabled: true };
         } else {
           this.value.global.cattle.windows.enabled = true;
         }
@@ -193,9 +193,9 @@ export default {
 
       keyNames.forEach((kn) => {
         if (!value[kn]) {
-          this.$set(value, kn, {});
+          value[kn] = {};
         }
-        this.$set(value[kn], 'enabled', valueToSet);
+        value[kn]['enabled'] = valueToSet;
       });
     },
   },
@@ -204,7 +204,7 @@ export default {
 
 <template>
   <LabeledSelect
-    v-model="clusterType"
+    v-model:value="clusterType"
     :label="t('monitoring.clusterType.label')"
     :placeholder="t('monitoring.clusterType.placeholder')"
     :localized-label="true"

package/chart/monitoring/alerting/index.vue

@@ -117,7 +117,7 @@ export default {
           );
         }
       } else {
-        this.$set(this.value.alertmanager.alertmanagerSpec, 'configSecret', '');
+        this.value.alertmanager.alertmanagerSpec['configSecret'] = '';
       }
     },
   },
@@ -126,7 +126,7 @@ export default {
     const amSecrets = this.value?.alertmanager?.alertmanagerSpec?.secrets ?? [];
 
     if (this.existingSecret && amSecrets.length <= 0) {
-      this.$set(this.value.alertmanager.alertmanagerSpec, 'useExistingSecret', true);
+      this.value.alertmanager.alertmanagerSpec['useExistingSecret'] = true;
     }
   },
 };
@@ -141,7 +141,7 @@ export default {
       <div class="row">
         <div class="col span-6">
           <Checkbox
-            v-model="value.alertmanager.enabled"
+            v-model:value="value.alertmanager.enabled"
             :label="t('monitoring.alerting.enable.label')"
           />
         </div>
@@ -150,7 +150,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <RadioGroup
-              v-model="value.alertmanager.alertmanagerSpec.useExistingSecret"
+              v-model:value="value.alertmanager.alertmanagerSpec.useExistingSecret"
               name="useExistingSecret"
               :disabled="forceCreateNewSecret"
               label-key="monitoring.alerting.secrets.radio.label"
@@ -163,7 +163,7 @@ export default {
           <div class="col span-6">
             <LabeledSelect
               v-if="value.alertmanager.alertmanagerSpec.useExistingSecret"
-              v-model="value.alertmanager.alertmanagerSpec.configSecret"
+              v-model:value="value.alertmanager.alertmanagerSpec.configSecret"
               class="provider"
               :label="t('monitoring.alerting.secrets.label')"
               :options="filteredSecrets"
@@ -176,7 +176,7 @@ export default {
         >
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.alertmanager.alertmanagerSpec.secrets"
+              v-model:value="value.alertmanager.alertmanagerSpec.secrets"
               :options="allSecrets"
               :label="t('monitoring.alerting.secrets.additional.label')"
               :mode="mode"