@rancher/shell 2.0.1 → 3.0.0-rc.2

package/edit/monitoring.coreos.com.prometheusrule/RecordingRule.vue

@@ -41,10 +41,10 @@ export default {
 
   methods: {
     updateExpression(value) {
-      this.$set(this.value, 'expr', value);
+      this.value['expr'] = value;
     },
     updateLabels(value) {
-      this.$set(this.value, 'labels', value);
+      this.value['labels'] = value;
     },
   }
 };
@@ -55,7 +55,7 @@ export default {
     <div class="row mt-25">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.record"
+          v-model:value="value.record"
           :label="t('prometheusRule.recordingRules.name')"
           :required="true"
           data-testid="v2-monitoring-prom-rules-recording-name"
@@ -65,7 +65,7 @@ export default {
     <div class="row">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.expr"
+          v-model:value="value.expr"
           :label="t('prometheusRule.promQL.label')"
           :required="true"
         >

package/edit/monitoring.coreos.com.prometheusrule/index.vue

@@ -63,7 +63,7 @@ export default {
 
   mounted() {
     if (this.isCreate) {
-      this.$set(this.value, 'spec', { groups: [] });
+      this.value['spec'] = { groups: [] };
       this.addRuleGroup();
     }
   },
@@ -72,7 +72,7 @@ export default {
     this.registerBeforeHook(this.willSave, 'willSave');
 
     if (this.mode === _CREATE) {
-      this.$set(this.value.metadata, 'namespace', 'cattle-monitoring-system');
+      this.value.metadata['namespace'] = 'cattle-monitoring-system';
     }
   },
 
@@ -98,9 +98,9 @@ export default {
           const interval = group.interval;
 
           if (isString(interval)) {
-            this.$set(group, 'interval', interval.includes('s') ? interval : `${ interval }s`);
+            group['interval'] = interval.includes('s') ? interval : `${ interval }s`;
           } else {
-            this.$set(group, 'interval', `${ interval }s`);
+            group['interval'] = `${ interval }s`;
           }
         }
       });
@@ -111,7 +111,7 @@ export default {
     },
 
     updateGroupInterval(group, interval) {
-      this.$set(group, 'interval', [null, undefined].includes(interval) ? undefined : `${ interval }s`);
+      group['interval'] = [null, undefined].includes(interval ? undefined : `${ interval }s`);
     },
 
     getGroupInterval(interval) {
@@ -154,7 +154,7 @@ export default {
       >
         <Tab
           v-for="(group, idx) in filteredGroups"
-          :key="'filtered-group-' + idx"
+          :key="idx"
           :name="'group-' + idx"
           :label="ruleGroupLabel(idx)"
           class="container-group"
@@ -162,7 +162,7 @@ export default {
           <div class="row">
             <div class="col span-6">
               <LabeledInput
-                v-model="group.name"
+                v-model:value="group.name"
                 :label="t('prometheusRule.groups.name')"
                 :mode="mode"
                 :required="true"
@@ -181,12 +181,12 @@ export default {
                 :label="t('prometheusRule.groups.groupInterval.label')"
                 :mode="mode"
                 :data-testid="`v2-monitoring-prom-rules-group-interval-${idx}`"
-                @input="(e) => updateGroupInterval(filteredGroups[idx], e)"
+                @update:value="(e) => updateGroupInterval(filteredGroups[idx], e)"
               />
             </div>
           </div>
           <GroupRules
-            v-model="group.rules"
+            v-model:value="group.rules"
             class="mb-20"
             :mode="mode"
           />

package/edit/monitoring.coreos.com.receiver/auth.vue

@@ -24,7 +24,7 @@ export default {
     }
   },
   data() {
-    this.$set(this.value, 'basic_auth', this.value.basic_auth || {});
+    this.value['basic_auth'] = this.value.basic_auth || {};
 
     const authOptions = [
       {
@@ -62,9 +62,9 @@ export default {
     initializeType(authOptions, type) {
       authOptions.forEach((authOption) => {
         if (authOption.value === type && type !== 'none') {
-          this.$set(this.value, authOption.value, this.value[authOption.value] || authOption.default);
+          this.value[authOption.value] = this.value[authOption.value] || authOption.default;
         } else if (typeof this.value[authOption.value] !== 'undefined') {
-          this.$delete(this.value, authOption.value);
+          delete this.value[authOption.value];
         }
       });
     },
@@ -82,10 +82,10 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledSelect
-          v-model="authType"
+          v-model:value="authType"
           :options="authOptions"
           label="Auth Type"
-          @input="initializeType(authOptions, authType)"
+          @update:value="initializeType(authOptions, authType)"
         />
       </div>
     </div>
@@ -95,14 +95,14 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="value.basic_auth.username"
+          v-model:value="value.basic_auth.username"
           :mode="mode"
           :label="t('monitoringReceiver.auth.username')"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.basic_auth.password"
+          v-model:value="value.basic_auth.password"
           :mode="mode"
           :label="t('monitoringReceiver.auth.password')"
           type="password"
@@ -116,7 +116,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="value.bearer_token"
+          v-model:value="value.bearer_token"
           :mode="mode"
           :label="t('monitoringReceiver.auth.bearerToken.label')"
           :placeholder="t('monitoringReceiver.auth.bearerToken.placeholder')"
@@ -131,7 +131,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="value.bearer_token_file"
+          v-model:value="value.bearer_token_file"
           :mode="mode"
           :label="t('monitoringReceiver.auth.bearerTokenFile.label')"
           :placeholder="t('monitoringReceiver.auth.bearerTokenFile.placeholder')"

package/edit/monitoring.coreos.com.receiver/index.vue

@@ -42,22 +42,22 @@ export default {
   },
 
   data() {
-    this.$set(this.value, 'spec', this.value.spec || {});
+    this.value['spec'] = this.value.spec || {};
 
     if (this.mode === _EDIT || this.mode === _VIEW) {
       for (let i = 0; i < this.value.spec.email_configs.length; i++) {
         if (this.value.spec.email_configs[i].smarthost) {
           const hostPort = this.value.spec.email_configs[i].smarthost.split(':');
 
-          this.$set(this.value.spec.email_configs[i], 'host', hostPort[0] || '');
-          this.$set(this.value.spec.email_configs[i], 'port', hostPort[1] || '');
+          this.value.spec.email_configs[i]['host'] = hostPort[0] || '';
+          this.value.spec.email_configs[i]['port'] = hostPort[1] || '';
           delete this.value.spec.email_configs[i]['smarthost'];
         }
       }
     }
 
     RECEIVERS_TYPES.forEach((receiverType) => {
-      this.$set(this.value.spec, receiverType.key, this.value.spec[receiverType.key] || []);
+      this.value.spec[receiverType.key] = this.value.spec[receiverType.key] || [];
     });
 
     const specSchema = this.$store.getters['cluster/schemaFor'](MONITORING.SPOOFED.RECEIVER_SPEC);
@@ -108,7 +108,7 @@ export default {
         // We need this step so we don't just keep adding new keys when modifying the custom field
         Object.keys(this.value.spec).forEach((key) => {
           if (!this.expectedFields.includes(key)) {
-            this.$delete(this.value.spec, key);
+            delete this.value.spec[key];
           }
         });
 
@@ -206,7 +206,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.name"
+          v-model:value="value.spec.name"
           :disabled="!isCreate"
           :label="t('generic.name')"
           :mode="mode"
@@ -259,7 +259,7 @@ export default {
         <YamlEditor
           v-if="receiverType.name === 'custom'"
           ref="customEditor"
-          v-model="suffixYaml"
+          v-model:value="suffixYaml"
           :scrolling="false"
           :editor-mode="editorMode"
         />
@@ -271,7 +271,7 @@ export default {
             :mode="mode"
           />
           <ArrayListGrouped
-            v-model="value.spec[receiverType.key]"
+            v-model:value="value.spec[receiverType.key]"
             class="namespace-list"
             :mode="mode"
             :default-add-value="{}"

package/edit/monitoring.coreos.com.receiver/tls.vue

@@ -23,7 +23,7 @@ export default {
     }
   },
   data() {
-    this.$set(this.value, 'tls_config', this.value.tls_config || {});
+    this.value.tls_config = this.value.tls_config || {};
 
     return {};
   },
@@ -43,7 +43,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.tls_config.ca_file"
+          v-model:value="value.tls_config.ca_file"
           :mode="mode"
           :label="t('monitoring.receiver.tls.caFilePath.label')"
           :placeholder="t('monitoring.receiver.tls.caFilePath.placeholder')"
@@ -53,7 +53,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.tls_config.cert_file"
+          v-model:value="value.tls_config.cert_file"
           :mode="mode"
           :label="t('monitoring.receiver.tls.certFilePath.label')"
           :placeholder="t('monitoring.receiver.tls.certFilePath.placeholder')"
@@ -61,7 +61,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.tls_config.key_file"
+          v-model:value="value.tls_config.key_file"
           :mode="mode"
           :label="t('monitoring.receiver.tls.keyFilePath.label')"
           :placeholder="t('monitoring.receiver.tls.keyFilePath.placeholder')"

package/edit/monitoring.coreos.com.receiver/types/__tests__/email.test.ts

@@ -4,18 +4,20 @@ import Email from '@shell/edit/monitoring.coreos.com.receiver/types/email.vue';
 describe('page: Routes and Receivers', () => {
   it('should have host field with a valid integer value under Email form', () => {
     const wrapper = mount(Email, {
-      propsData: {
+      props: {
         mode:  'create',
         value: {}
       },
-      mocks: {
-        t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
-        $store: {
-          getters: {
-            'i18n/t':      jest.fn(),
-            'i18n/exists': jest.fn()
+      global: {
+        mocks: {
+          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+          $store: {
+            getters: {
+              'i18n/t':      jest.fn(),
+              'i18n/exists': jest.fn()
+            }
           }
-        }
+        },
       },
     });
 
@@ -28,18 +30,20 @@ describe('page: Routes and Receivers', () => {
   });
   it('should have port field with a valid integer value under Email form', () => {
     const wrapper = mount(Email, {
-      propsData: {
+      props: {
         mode:  'create',
         value: {}
       },
-      mocks: {
-        t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
-        $store: {
-          getters: {
-            'i18n/t':      jest.fn(),
-            'i18n/exists': jest.fn()
+      global: {
+        mocks: {
+          t:      (text: string) => text, // Mock i18n global function used as alternative to the getter
+          $store: {
+            getters: {
+              'i18n/t':      jest.fn(),
+              'i18n/exists': jest.fn()
+            }
           }
-        }
+        },
       },
     });
 

package/edit/monitoring.coreos.com.receiver/types/email.vue

@@ -26,8 +26,8 @@ export default {
     }
   },
   data() {
-    this.$set(this.value, 'send_resolved', this.value.send_resolved || false);
-    this.$set(this.value, 'require_tls', this.value.require_tls || false);
+    this.value['send_resolved'] = this.value.send_resolved || false;
+    this.value['require_tls'] = this.value.require_tls || false;
 
     return {};
   },
@@ -44,7 +44,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.to"
+          v-model:value="value.to"
           :mode="mode"
           label="Default Recipient Address"
           placeholder="e.g. admin@example.com"
@@ -52,7 +52,7 @@ export default {
       </div>
       <div class="col span-6">
         <Checkbox
-          v-model="value.send_resolved"
+          v-model:value="value.send_resolved"
           :mode="mode"
           class="mt-20"
           label="Enable send resolved alerts"
@@ -65,7 +65,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.from"
+          v-model:value="value.from"
           :mode="mode"
           label="Sender"
           placeholder="e.g. admin@example.com"
@@ -75,7 +75,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-4">
         <LabeledInput
-          v-model="value.host"
+          v-model:value="value.host"
           :mode="mode"
           label="Host"
           data-testid="input-email-host"
@@ -84,7 +84,7 @@ export default {
       </div>
       <div class="col span-4">
         <LabeledInput
-          v-model="value.port"
+          v-model:value="value.port"
           :mode="mode"
           label="Port"
           data-testid="input-email-port"
@@ -93,7 +93,7 @@ export default {
       </div>
       <div class="col span-4">
         <Checkbox
-          v-model="value.require_tls"
+          v-model:value="value.require_tls"
           :mode="mode"
           class="mt-20"
           label="Use TLS"
@@ -103,7 +103,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.auth_username"
+          v-model:value="value.auth_username"
           :mode="mode"
           label="Username"
           placeholder="e.g. John"
@@ -111,7 +111,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.auth_password"
+          v-model:value="value.auth_password"
           :mode="mode"
           label="Password"
           type="password"
@@ -120,9 +120,10 @@ export default {
       </div>
     </div>
     <TLS
-      v-model="value"
+      :value="value"
       class="mb-20"
       :mode="mode"
+      @update:value="$emit('input', $event)"
     />
   </div>
 </template>

package/edit/monitoring.coreos.com.receiver/types/opsgenie.vue

@@ -63,9 +63,9 @@ export default {
     }
   },
   data() {
-    this.$set(this.value, 'http_config', this.value.http_config || {});
-    this.$set(this.value, 'send_resolved', typeof this.value.send_resolved === 'boolean' ? this.value.send_resolved : true);
-    this.$set(this.value, 'responders', this.value.responders || []);
+    this.value['http_config'] = this.value.http_config || {};
+    this.value['send_resolved'] = typeof this.value.send_resolved === 'boolean' ? this.value.send_resolved : true;
+    this.value['responders'] = this.value.responders || [];
 
     const responders = this.value.responders.map((responder) => {
       const target = TARGETS.find((target) => responder[target.value]);
@@ -106,7 +106,7 @@ export default {
           };
         });
 
-        this.$set(this.value, 'responders', responders);
+        this.value['responders'] = responders;
       }
     }
   },
@@ -136,7 +136,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.api_key"
+          v-model:value="value.api_key"
           :mode="mode"
           label="API Key"
         />
@@ -145,7 +145,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.http_config.proxy_url"
+          v-model:value="value.http_config.proxy_url"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"
@@ -154,7 +154,7 @@ export default {
     </div>
     <div class="row mb-20">
       <Checkbox
-        v-model="value.send_resolved"
+        v-model:value="value.send_resolved"
         :mode="mode"
         label="Enable send resolved alerts"
       />
@@ -163,7 +163,7 @@ export default {
       <div class="col span-12">
         <h3>Responders</h3>
         <ArrayList
-          v-model="responders"
+          v-model:value="responders"
           :mode="mode"
           :default-add-value="defaultResponder"
           :show-header="true"
@@ -189,7 +189,7 @@ export default {
                 <span v-if="isView">{{ typeLabel(scope.row.value.type) }}</span>
                 <Select
                   v-else
-                  v-model="scope.row.value.type"
+                  v-model:value="scope.row.value.type"
                   :mode="mode"
                   :options="TYPES"
                 />
@@ -203,7 +203,7 @@ export default {
                   :options="TARGETS"
                   :select-value="scope.row.value.target"
                   :text-value="scope.row.value.value"
-                  @input="updateResponder($event, scope.row.value)"
+                  @update:value="updateResponder($event, scope.row.value)"
                 />
               </div>
             </div>
@@ -225,7 +225,7 @@ export default {
       width: 100%;
     }
 
-    .target-container ::v-deep .unlabeled-select {
+    .target-container :deep() .unlabeled-select {
       min-width: 35%;
       height: 100%;
     }

package/edit/monitoring.coreos.com.receiver/types/pagerduty.vue

@@ -26,8 +26,8 @@ export default {
     }
   },
   data() {
-    this.$set(this.value, 'http_config', this.value.http_config || {});
-    this.$set(this.value, 'send_resolved', typeof this.value.send_resolved === 'boolean' ? this.value.send_resolved : true);
+    this.value['http_config'] = this.value.http_config || {};
+    this.value['send_resolved'] = typeof this.value.send_resolved === 'boolean' ? this.value.send_resolved : true;
 
     const integrationMapping = {
       'Events API v2': 'routing_key',
@@ -62,7 +62,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledSelect
-          v-model="integrationType"
+          v-model:value="integrationType"
           :options="integrationTypeOptions"
           :mode="mode"
           label="Integration Type"
@@ -70,7 +70,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value[integrationMapping[integrationType]]"
+          v-model:value="value[integrationMapping[integrationType]]"
           :mode="mode"
           label="Default Integration Key"
         />
@@ -79,7 +79,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.http_config.proxy_url"
+          v-model:value="value.http_config.proxy_url"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"
@@ -88,7 +88,7 @@ export default {
     </div>
     <div class="row">
       <Checkbox
-        v-model="value.send_resolved"
+        v-model:value="value.send_resolved"
         :mode="mode"
         label="Enable send resolved alerts"
       />

package/edit/monitoring.coreos.com.receiver/types/slack.vue

@@ -24,8 +24,8 @@ export default {
     },
   },
   data() {
-    this.$set(this.value, 'http_config', this.value.http_config || {});
-    this.$set(this.value, 'send_resolved', this.value.send_resolved || false);
+    this.value['http_config'] = this.value.http_config || {};
+    this.value['send_resolved'] = this.value.send_resolved || false;
 
     if (this.mode === _CREATE) {
       this.$set(
@@ -50,7 +50,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.api_url"
+          v-model:value="value.api_url"
           :mode="mode"
           label="Webhook URL"
           placeholder="e.g. https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX"
@@ -66,7 +66,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.channel"
+          v-model:value="value.channel"
           :mode="mode"
           label="Default Channel"
           placeholder="e.g. #example"
@@ -74,7 +74,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.http_config.proxy_url"
+          v-model:value="value.http_config.proxy_url"
           :mode="mode"
           label="Proxy URL"
           placeholder="e.g. http://my-proxy/"
@@ -83,7 +83,7 @@ export default {
     </div>
     <div class="row">
       <Checkbox
-        v-model="value.send_resolved"
+        v-model:value="value.send_resolved"
         :mode="mode"
         label="Enable send resolved alerts"
       />

package/edit/monitoring.coreos.com.receiver/types/webhook.vue

@@ -30,8 +30,8 @@ export default {
     }
   },
   data() {
-    this.$set(this.value, 'http_config', this.value.http_config || {});
-    this.$set(this.value, 'send_resolved', this.value.send_resolved || false);
+    this.value['http_config'] = this.value.http_config || {};
+    this.value['send_resolved'] = this.value.send_resolved || false;
     const isDriverUrl = this.value.url === MS_TEAMS_URL || this.value.url === ALIBABA_CLOUD_SMS_URL;
 
     return { showNamespaceBanner: isDriverUrl && this.mode !== _VIEW };
@@ -56,7 +56,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.url"
+          v-model:value="value.url"
           :mode="mode"
           label="URL"
           :tooltip="t('monitoringReceiver.webhook.urlTooltip')"
@@ -66,7 +66,7 @@ export default {
     <div class="row mb-20">
       <div class="col span-12">
         <LabeledInput
-          v-model="value.http_config.proxy_url"
+          v-model:value="value.http_config.proxy_url"
           :mode="mode"
           :label="t('monitoringReceiver.shared.proxyUrl.label')"
           :placeholder="t('monitoringReceiver.shared.proxyUrl.placeholder')"
@@ -75,18 +75,18 @@ export default {
     </div>
     <div class="row mb-20">
       <Checkbox
-        v-model="value.send_resolved"
+        v-model:value="value.send_resolved"
         :mode="mode"
         :label="t('monitoringReceiver.shared.sendResolved.label')"
       />
     </div>
     <TLS
-      v-model="value.http_config"
+      v-model:value="value.http_config"
       class="mb-20"
       :mode="mode"
     />
     <Auth
-      v-model="value.http_config"
+      v-model:value="value.http_config"
       :mode="mode"
     />
   </div>