@rancher/shell 2.0.0 → 3.0.0-rc.1

package/edit/monitoring.coreos.com.route.vue

@@ -44,12 +44,12 @@ export default {
     if (this.isCreate) {
       const nonRootRoutes = (await routes).filter((route) => !route.isRoot);
 
-      this.$set(this.value.spec, 'name', createDefaultRouteName(nonRootRoutes.length));
+      this.value.spec['name'] = createDefaultRouteName(nonRootRoutes.length);
     }
   },
 
   data() {
-    this.$set(this.value.spec, 'group_by', this.value.spec.group_by || []);
+    this.value.spec['group_by'] = this.value.spec.group_by || [];
 
     return {
       receiverOptions:      [],
@@ -84,7 +84,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledInput
-          v-model="value.spec.name"
+          v-model:value="value.spec.name"
           :disabled="true"
           :label="t('generic.name')"
           :mode="mode"
@@ -110,7 +110,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.spec.receiver"
+              v-model:value="value.spec.receiver"
               :options="receiverOptions"
               :label="t('monitoringRoute.receiver.label')"
               :mode="mode"
@@ -130,7 +130,7 @@ export default {
             </span>
             <ArrayList
               v-if="!isView || value.spec.group_by.length > 0"
-              v-model="value.spec.group_by"
+              v-model:value="value.spec.group_by"
               :label="t('monitoringRoute.groups.label')"
               :mode="mode"
               :initial-empty-row="true"
@@ -144,14 +144,14 @@ export default {
         <div class="row mb-10">
           <div class="col span-6">
             <LabeledInput
-              v-model="value.spec.group_wait"
+              v-model:value="value.spec.group_wait"
               :label="t('monitoringRoute.wait.label')"
               :mode="mode"
             />
           </div>
           <div class="col span-6">
             <LabeledInput
-              v-model="value.spec.group_interval"
+              v-model:value="value.spec.group_interval"
               :label="t('monitoringRoute.interval.label')"
               :mode="mode"
             />
@@ -160,7 +160,7 @@ export default {
         <div class="row mb-10">
           <div class="col span-6">
             <LabeledInput
-              v-model="value.spec.repeat_interval"
+              v-model:value="value.spec.repeat_interval"
               :label="t('monitoringRoute.repeatInterval.label')"
               :mode="mode"
             />
@@ -188,7 +188,7 @@ export default {
             </span>
             <KeyValue
               v-if="!isView || Object.keys(value.spec.match || {}).length > 0"
-              v-model="value.spec.match"
+              v-model:value="value.spec.match"
               :disabled="value.isRoot"
               :options="receiverOptions"
               :label="t('monitoringRoute.receiver.label')"
@@ -208,7 +208,7 @@ export default {
             </span>
             <KeyValue
               v-if="!isView || Object.keys(value.spec.match_re || {}).length > 0"
-              v-model="value.spec.match_re"
+              v-model:value="value.spec.match_re"
               :disabled="value.isRoot"
               :options="receiverOptions"
               :label="t('monitoringRoute.receiver.label')"

package/edit/namespace.vue

@@ -123,11 +123,11 @@ export default {
     project() {
       const limits = this.getDefaultContainerResourceLimits(this.projectName);
 
-      this.$set(this, 'containerResourceLimits', limits);
+      this['containerResourceLimits'] = limits;
     },
 
     projectName(newProjectName) {
-      this.$set(this, 'project', this.projects.find((p) => p.id.includes(newProjectName)));
+      this['project'] = this.projects.find((p) => p.id.includes(newProjectName));
     }
   },
 
@@ -191,7 +191,7 @@ export default {
         #project-col
       >
         <LabeledSelect
-          v-model="projectName"
+          v-model:value="projectName"
           data-testid="name-ns-description-project"
           :label="t('namespace.project.label')"
           :options="projectOpts"
@@ -199,9 +199,10 @@ export default {
       </template>
     </NameNsDescription>
     <ResourceTabs
-      v-model="value"
+      :value="value"
       :mode="mode"
       :side-tabs="true"
+      @update:value="$emit('input', $event)"
     >
       <Tab
         v-if="showResourceQuota"
@@ -227,10 +228,11 @@ export default {
           </div>
         </div>
         <ResourceQuota
-          v-model="value"
+          :value="value"
           :mode="mode"
           :project="project"
           :types="isStandaloneHarvester ? HARVESTER_TYPES : RANCHER_TYPES"
+          @update:value="$emit('input', $event)"
         />
       </Tab>
       <Tab
@@ -240,7 +242,6 @@ export default {
         :label="t('namespace.containerResourceLimit')"
       >
         <ContainerResourceLimit
-          :key="JSON.stringify(containerResourceLimits)"
           :value="containerResourceLimits"
           :mode="mode"
           :namespace="value"
@@ -253,7 +254,6 @@ export default {
         :weight="-1"
       >
         <Labels
-          :key="rerenderNums"
           default-container-class="labels-and-annotations-container"
           :value="value"
           :mode="mode"

package/edit/networking.istio.io.destinationrule/LoadBalancer.vue

@@ -76,7 +76,7 @@ export default {
         this.value.simple = this.simpleOptions[0];
       } else {
         delete this.value.simple;
-        this.$set(this.value, 'consistentHash', { minimumRingSize: 1024 });
+        this.value['consistentHash'] = { minimumRingSize: 1024 };
         // set hashMode here to trigger watcher and initialize relevant object props
         this.hashMode = 'useHeader';
       }
@@ -87,16 +87,16 @@ export default {
       case 'useHeader':
         delete this.value.consistentHash.httpCookie;
         delete this.value.consistentHash.useSourceIp;
-        this.$set(this.value.consistentHash, 'httpHeaderName', '');
+        this.value.consistentHash['httpHeaderName'] = '';
         break;
       case 'useCookie':
         delete this.value.consistentHash.httpHeaderName;
-        this.$set(this.value.consistentHash, 'httpCookie', {});
+        this.value.consistentHash['httpCookie'] = {};
         break;
       default:
         delete this.value.consistentHash.httpCookie;
         delete this.value.consistentHash.httpHeaderName;
-        this.$set(this.value.consistentHash, 'useSourceIp', true);
+        this.value.consistentHash['useSourceIp'] = true;
         break;
       }
     }
@@ -108,7 +108,7 @@ export default {
   <div>
     <div class="row">
       <RadioGroup
-        v-model="useSimple"
+        v-model:value="useSimple"
         name="loadBalancer"
         :mode="mode"
         :options="modeOptions"
@@ -120,7 +120,7 @@ export default {
     >
       <div class="col span-6">
         <LabeledSelect
-          v-model="value.simple"
+          v-model:value="value.simple"
           :options="simpleOptions"
           :label="t('istio.destinationRule.loadBalancer.label')"
           :mode="mode"
@@ -131,7 +131,7 @@ export default {
       <div class="row mt-20">
         <div class="col span-6">
           <RadioGroup
-            v-model="hashMode"
+            v-model:value="hashMode"
             name="HashOptions"
             :mode="mode"
             :options="hashModeOptions"
@@ -142,7 +142,7 @@ export default {
       <div class="row mb-20">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.consistentHash.minimumRingSize"
+            v-model:value="value.consistentHash.minimumRingSize"
             :label="t('istio.destinationRule.loadBalancer.consistentHash.minimumRingSize.label')"
             type="number"
           />
@@ -154,7 +154,7 @@ export default {
       >
         <div class="col span-6">
           <LabeledInput
-            v-model="value.consistentHash.httpHeaderName"
+            v-model:value="value.consistentHash.httpHeaderName"
             :label="t('istio.destinationRule.loadBalancer.consistentHash.httpHeaderName.label')"
             :placeholder="t('istio.destinationRule.loadBalancer.consistentHash.httpHeaderName.placeholder')"
           />
@@ -167,7 +167,7 @@ export default {
       >
         <div class="col span-4">
           <LabeledInput
-            v-model="value.consistentHash.httpCookie.name"
+            v-model:value="value.consistentHash.httpCookie.name"
             :label="t('istio.destinationRule.loadBalancer.consistentHash.httpCookie.name.label')"
             :placeholder="t('istio.destinationRule.loadBalancer.consistentHash.httpCookie.name.placeholder')"
             required
@@ -175,14 +175,14 @@ export default {
         </div>
         <div class="col span-4">
           <LabeledInput
-            v-model="value.consistentHash.httpCookie.path"
+            v-model:value="value.consistentHash.httpCookie.path"
             :label="t('istio.destinationRule.loadBalancer.consistentHash.httpCookie.path.label')"
             :placeholder="t('istio.destinationRule.loadBalancer.consistentHash.httpCookie.path.placeholder')"
           />
         </div>
         <div class="col span-4">
           <LabeledInput
-            v-model="value.consistentHash.httpCookie.ttl"
+            v-model:value="value.consistentHash.httpCookie.ttl"
             :label="t('istio.destinationRule.loadBalancer.consistentHash.httpCookie.ttl.label')"
             :placeholder="t('istio.destinationRule.loadBalancer.consistentHash.httpCookie.ttl.placeholder')"
             required

package/edit/networking.istio.io.destinationrule/index.vue

@@ -55,7 +55,7 @@ export default {
     />
     <div class="mb-20">
       <LabeledInput
-        v-model="value.spec.host"
+        v-model:value="value.spec.host"
         :label="t('istio.destinationRule.host.label')"
         :mode="mode"
 
@@ -72,7 +72,7 @@ export default {
           :weight="10"
         >
           <ArrayListGrouped
-            v-model="value.spec.subsets"
+            v-model:value="value.spec.subsets"
             table-class="fixed"
             :mode="mode"
             title="Name"
@@ -80,14 +80,14 @@ export default {
           >
             <template #default="{row, i}">
               <LabeledInput
-                v-model="row.value.name"
+                v-model:value="row.value.name"
                 :label="t('generic.name')"
                 :mode="mode"
                 :required="true"
               />
               <KeyValue
                 :key="i"
-                v-model="row.value.labels"
+                v-model:value="row.value.labels"
                 :mode="mode"
                 :protip="true"
                 :read-allowed="false"
@@ -101,7 +101,7 @@ export default {
           :weight="3"
         >
           <LoadBalancer
-            v-model="value.spec.trafficPolicy.loadBalancer"
+            v-model:value="value.spec.trafficPolicy.loadBalancer"
             :mode="mode"
           />
         </Tab>
@@ -118,7 +118,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.connectionPool.http1MaxPendingRequests.help')"
                 :placeholder="t('istio.destinationRule.connectionPool.http1MaxPendingRequests.placeholder')"
-                @input="set(value,'spec.trafficPolicy.connectionPool.http.http1MaxPendingRequests', $event)"
+                @update:value="set(value,'spec.trafficPolicy.connectionPool.http.http1MaxPendingRequests', $event)"
               />
             </div>
             <div class="col span-4 mb-10">
@@ -128,7 +128,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.connectionPool.http2MaxRequests.help')"
                 :placeholder="t('istio.destinationRule.connectionPool.http2MaxRequests.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.connectionPool.http.http2MaxRequests', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.connectionPool.http.http2MaxRequests', $event)"
               />
             </div>
             <div class="col span-4 mb-10">
@@ -138,7 +138,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.connectionPool.maxRequestsPerConnection.help')"
                 :placeholder="t('istio.destinationRule.connectionPool.maxRequestsPerConnection.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.connectionPool.http.maxRequestsPerConnection', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.connectionPool.http.maxRequestsPerConnection', $event)"
               />
             </div>
           </div>
@@ -150,7 +150,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.connectionPool.maxRetries.help')"
                 :placeholder="t('istio.destinationRule.connectionPool.maxRetries.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.connectionPool.http.maxRetries', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.connectionPool.http.maxRetries', $event)"
               />
             </div>
             <div class="col span-4 mb-10">
@@ -160,7 +160,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.connectionPool.connectTimeout.help')"
                 :placeholder="t('istio.destinationRule.connectionPool.connectTimeout.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.connectionPool.tcp.duration', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.connectionPool.tcp.duration', $event)"
               />
             </div>
             <div class="col span-4 mb-10">
@@ -170,7 +170,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.connectionPool.maxConnections.help')"
                 :placeholder="t('istio.destinationRule.connectionPool.maxConnections.placeholder')"
-                @input="set(value,'spec.trafficPolicy.connectionPool.tcp.maxConnections', $event)"
+                @update:value="set(value,'spec.trafficPolicy.connectionPool.tcp.maxConnections', $event)"
               />
             </div>
           </div>
@@ -188,7 +188,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.outlierDetection.baseEjectionTime.help')"
                 :placeholder="t('istio.destinationRule.outlierDetection.baseEjectionTime.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.outlierDetection.baseEjectionTime', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.outlierDetection.baseEjectionTime', $event)"
               />
             </div>
             <div class="col span-6 mb-10">
@@ -198,7 +198,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.outlierDetection.consecutiveErrors.help')"
                 :placeholder="t('istio.destinationRule.outlierDetection.consecutiveErrors.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.outlierDetection.consecutiveErrors', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.outlierDetection.consecutiveErrors', $event)"
               />
             </div>
           </div>
@@ -210,7 +210,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.outlierDetection.interval.help')"
                 :placeholder="t('istio.destinationRule.outlierDetection.interval.placeholder')"
-                @input="set(value,'spec.trafficPolicy.outlierDetection.interval', $event)"
+                @update:value="set(value,'spec.trafficPolicy.outlierDetection.interval', $event)"
               />
             </div>
             <div class="col span-6 mb-10">
@@ -220,7 +220,7 @@ export default {
                 :mode="mode"
                 :tooltip="t('istio.destinationRule.outlierDetection.maxEjectionPercent.help')"
                 :placeholder="t('istio.destinationRule.outlierDetection.maxEjectionPercent.placeholder')"
-                @input="set(value, 'spec.trafficPolicy.outlierDetection.maxEjectionPercent', $event)"
+                @update:value="set(value, 'spec.trafficPolicy.outlierDetection.maxEjectionPercent', $event)"
               />
             </div>
           </div>

package/edit/networking.k8s.io.ingress/Certificate.vue

@@ -63,7 +63,7 @@ export default {
         out.secretName = null;
       }
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
     onSecretInput(e) {
       this.secretName = e && typeof e === 'object' ? e.label : e;
@@ -80,11 +80,11 @@ export default {
 <template>
   <div
     class="cert row"
-    @input="update"
+    @update:value="update"
   >
     <div class="col span-6">
       <LabeledSelect
-        v-model="secretName"
+        v-model:value="secretName"
         class="secret-name"
         :options="certsWithDefault"
         :label="t('ingress.certificates.certificate.label')"
@@ -94,7 +94,7 @@ export default {
         :tooltip="certificateTooltip"
         :hover-tooltip="true"
         :searchable="true"
-        @input="onSecretInput"
+        @update:value="onSecretInput"
       />
     </div>
     <div class="col span-6">
@@ -103,7 +103,7 @@ export default {
         :add-label="t('ingress.certificates.addHost')"
         :rules="rules.host"
         :initial-empty-row="true"
-        @input="onHostsInput"
+        @update:value="onHostsInput"
       />
     </div>
   </div>

package/edit/networking.k8s.io.ingress/Certificates.vue

@@ -92,14 +92,14 @@ export default {
   />
   <div v-else>
     <ArrayListGrouped
-      v-model="value.spec.tls"
+      v-model:value="value.spec.tls"
       :add-label="t('ingress.certificates.addCertificate')"
       :default-add-value="defaultAddValue"
       :mode="mode"
     >
       <template #default="props">
         <Certificate
-          v-model="props.row.value"
+          v-model:value="props.row.value"
           class="mb-20"
           :mode="mode"
           :certs="certificates"

package/edit/networking.k8s.io.ingress/DefaultBackend.vue

@@ -75,7 +75,7 @@ export default {
       set(backend, this.value.servicePortPath, this.servicePort);
       set(this.value.spec, this.value.defaultBackendPath, backend);
 
-      this.$emit('input', this.value);
+      this.$emit('update:value', this.value);
     }
   },
   watch: {
@@ -87,17 +87,17 @@ export default {
 </script>
 <template>
   <div>
-    <Banner
-      color="warning"
-      :label="t('ingress.defaultBackend.warning')"
+    <Banner
+      color="warning"
+      :label="t('ingress.defaultBackend.warning')"
     />
-    <div
-      v-if="serviceName || !isView"
-      class="row"
+    <div
+      v-if="serviceName || !isView"
+      class="row"
     >
       <div class="col span-4">
         <LabeledSelect
-          v-model="serviceName"
+          v-model:value="serviceName"
           :taggable="true"
           :mode="mode"
           :label="t('ingress.defaultBackend.targetService.label')"
@@ -106,12 +106,12 @@ export default {
           :status="serviceTargetStatus"
           :tooltip="serviceTargetTooltip"
           :rules="rules.name"
-          @input="update(); servicePort = ''"
+          @update:value="update(); servicePort = ''"
         />
       </div>
-      <div
-        class="col span-3"
-        :style="{'margin-right': '0px'}"
+      <div
+        class="col span-3"
+        :style="{'margin-right': '0px'}"
       >
         <LabeledInput
           v-if="portOptions.length === 0 || isView"
@@ -120,23 +120,23 @@ export default {
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
           :rules="rules.port"
-          @input="update"
+          @update:value="update"
         />
         <LabeledSelect
           v-else
-          v-model="servicePort"
+          v-model:value="servicePort"
           :mode="mode"
           :options="portOptions"
           :label="t('ingress.defaultBackend.port.label')"
           :placeholder="t('ingress.defaultBackend.port.placeholder')"
           :rules="rules.port"
-          @input="update"
+          @update:value="update"
         />
       </div>
     </div>
-    <div
-      v-else
-      class="pl-10"
+    <div
+      v-else
+      class="pl-10"
     >
       {{ t('ingress.defaultBackend.noServiceSelected') }}
     </div>

package/edit/networking.k8s.io.ingress/IngressClass.vue

@@ -52,7 +52,7 @@ export default {
 <template>
   <div class="col span-4">
     <LabeledSelect
-      v-model="ingressClassName"
+      v-model:value="ingressClassName"
       :taggable="true"
       :searchable="true"
       :mode="mode"

package/edit/networking.k8s.io.ingress/Rule.vue

@@ -55,7 +55,7 @@ export default {
         if ((this.paths?.length === 1 && this.pathObjectIsEmpty(this.paths[0])) || this.paths?.length === 0) {
           delete out.http;
         }
-        this.$emit('input', out);
+        this.$emit('update:value', out);
       });
     },
     pathObjectIsEmpty(pathObject) {
@@ -113,11 +113,11 @@ export default {
       >
         <LabeledInput
           ref="host"
-          v-model="host"
+          v-model:value="host"
           :label="t('ingress.rules.requestHost.label')"
           :placeholder="t('ingress.rules.requestHost.placeholder')"
           :rules="rules.requestHost"
-          @input="update"
+          @update:value="update"
         />
       </div>
       <div
@@ -147,18 +147,20 @@ export default {
       </div>
       <div class="col" />
     </div>
-    <template v-for="(path, i) in paths">
+    <template
+      v-for="(path, i) in paths"
+      :key="path.id"
+    >
       <RulePath
         ref="paths"
-        :key="path.id"
-        v-model="paths[i]"
+        v-model:value="paths[i]"
         class="row mb-10"
         :rule-mode="ruleMode"
         :service-targets="serviceTargets"
         :ingress="ingress"
         :rules="{path: rules.path, port: rules.port, target: rules.target}"
         @remove="(e) => removePath(i)"
-        @input="update"
+        @update:value="update"
       />
     </template>
     <button

package/edit/networking.k8s.io.ingress/RulePath.vue

@@ -88,7 +88,7 @@ export default {
       set(out.backend, this.ingress.servicePortPath, servicePort);
       set(out.backend, this.ingress.serviceNamePath, serviceName);
 
-      this.$emit('input', out);
+      this.$emit('update:value', out);
     },
     updatePathTypeAndPath(values) {
       this.path = values.text;
@@ -120,7 +120,7 @@ export default {
         :text-value="value.path"
         :searchable="false"
         :text-rules="rules.path"
-        @input="queueUpdatePathTypeAndPath"
+        @update:value="queueUpdatePathTypeAndPath"
       />
     </div>
     <div
@@ -139,14 +139,14 @@ export default {
       :class="{'span-3': ingress.showPathType, 'span-4': !ingress.showPathType}"
     >
       <Select
-        v-model="serviceName"
+        v-model:value="serviceName"
         :options="serviceTargets"
         :status="serviceTargetStatus"
         :taggable="true"
         :searchable="true"
         :tooltip="serviceTargetTooltip"
         :hover-tooltip="true"
-        @input="servicePort = ''; queueUpdate();"
+        @update:value="servicePort = ''; queueUpdate();"
       />
     </div>
     <div
@@ -156,19 +156,19 @@ export default {
     >
       <LabeledInput
         v-if="portOptions.length === 0"
-        v-model="servicePort"
+        v-model:value="servicePort"
         class="fullHeightInput"
         :placeholder="t('ingress.rules.port.placeholder')"
         :rules="rules.port"
-        @input="queueUpdate"
+        @update:value="queueUpdate"
       />
       <Select
         v-else
-        v-model="servicePort"
+        v-model:value="servicePort"
         :options="portOptions"
         :placeholder="t('ingress.rules.port.placeholder')"
         :rules="rules.port"
-        @input="queueUpdate"
+        @update:value="queueUpdate"
       />
     </div>
     <button
@@ -182,7 +182,7 @@ export default {
 <style lang="scss" scoped>
 $row-height: 40px;
 
-.labeled-input ::v-deep, ::v-deep .labeled-input {
+.labeled-input :deep(), :deep() .labeled-input {
   padding: 0 !important;
   height: 100%;
   input.no-label {
@@ -190,7 +190,7 @@ $row-height: 40px;
     padding: 10px;
   }
 }
-.rule-path ::v-deep {
+.rule-path :deep() {
   .col, INPUT {
     height: $row-height;
   }