@rancher/shell 2.0.0 → 3.0.0-rc.1

package/chart/monitoring/grafana/index.vue

@@ -159,12 +159,12 @@ export default {
         };
         break;
       default:
-        this.$delete(this.value.grafana, 'persistence');
+        delete this.value.grafana['persistence'];
         break;
       }
 
-      this.$set(this.value.grafana, 'persistence', resetValsOut);
-      this.$set(this.value.grafana, 'persistence', newValsOut);
+      this.value.grafana['persistence'] = resetValsOut;
+      this.value.grafana['persistence'] = newValsOut;
     },
   }
 };
@@ -194,7 +194,7 @@ export default {
       >
         <div class="col span-6">
           <LabeledInput
-            v-model="value.grafana.resources.requests.cpu"
+            v-model:value="value.grafana.resources.requests.cpu"
             data-testid="input-grafana-requests-cpu"
             :label="t('monitoring.prometheus.config.requests.cpu')"
             :mode="mode"
@@ -202,7 +202,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.grafana.resources.requests.memory"
+            v-model:value="value.grafana.resources.requests.memory"
             data-testid="input-grafana-requests-memory"
             :label="t('monitoring.prometheus.config.requests.memory')"
             :mode="mode"
@@ -212,7 +212,7 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.grafana.resources.limits.cpu"
+            v-model:value="value.grafana.resources.limits.cpu"
             data-testid="input-grafana-limits-cpu"
             :label="t('monitoring.prometheus.config.limits.cpu')"
             :mode="mode"
@@ -220,7 +220,7 @@ export default {
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.grafana.resources.limits.memory"
+            v-model:value="value.grafana.resources.limits.memory"
             data-testid="input-grafana-limits-memory"
             :label="t('monitoring.prometheus.config.limits.memory')"
             :mode="mode"
@@ -231,7 +231,7 @@ export default {
       <div class="row pt-10 pb-10">
         <div class="col span-12 persistent-storage-config">
           <RadioGroup
-            v-model="persistentStorageType"
+            v-model:value="persistentStorageType"
             name="persistentStorageType"
             :label="t('monitoring.grafana.storage.label')"
             :labels="persistentStorageTypeLabels"
@@ -258,7 +258,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledInput
-              v-model="value.grafana.persistence.size"
+              v-model:value="value.grafana.persistence.size"
               :label="t('monitoring.grafana.storage.size')"
               :mode="mode"
               data-testid="grafana-storage-pvc-size"
@@ -279,7 +279,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.grafana.persistence.accessModes"
+              v-model:value="value.grafana.persistence.accessModes"
               :label="t('monitoring.grafana.storage.mode')"
               :localized-label="true"
               :mode="mode"
@@ -293,7 +293,7 @@ export default {
           <div class="row">
             <div class="col span-12">
               <KeyValue
-                v-model="value.grafana.persistence.annotations"
+                v-model:value="value.grafana.persistence.annotations"
                 :mode="mode"
                 :protip="true"
                 :read-allowed="false"
@@ -309,7 +309,7 @@ export default {
         <div class="row mt-20">
           <div class="col span-12">
             <ArrayList
-              v-model="value.grafana.persistence.finalizers"
+              v-model:value="value.grafana.persistence.finalizers"
               table-class="fixed"
               :mode="mode"
               :title="t('monitoring.grafana.storage.finalizers')"
@@ -325,7 +325,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledInput
-              v-model="value.grafana.persistence.size"
+              v-model:value="value.grafana.persistence.size"
               :label="t('monitoring.grafana.storage.size')"
               :mode="mode"
               data-testid="grafana-storage-statefulset-size"
@@ -346,7 +346,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.grafana.persistence.accessModes"
+              v-model:value="value.grafana.persistence.accessModes"
               :label="t('monitoring.grafana.storage.mode')"
               :localized-label="true"
               :mode="mode"

package/chart/monitoring/index.vue

@@ -12,6 +12,7 @@ import { LabeledInput } from '@components/Form/LabeledInput';
 import Loading from '@shell/components/Loading';
 import Prometheus from '@shell/chart/monitoring/prometheus';
 import Tab from '@shell/components/Tabbed/Tab';
+import Tabbed from '@shell/components/Tabbed';
 
 import { allHash } from '@shell/utils/promise';
 import { STORAGE_CLASS, PVC, SECRET, WORKLOAD_TYPES } from '@shell/config/types';
@@ -26,11 +27,10 @@ export default {
     LabeledInput,
     Loading,
     Prometheus,
-    Tab
+    Tab,
+    Tabbed
   },
 
-  hasTabs: true,
-
   props: {
     chart: {
       type:    Object,
@@ -109,7 +109,7 @@ export default {
     });
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.workloadTypes.forEach((type) => {
       this.$store.dispatch('cluster/forgetType', type);
     });
@@ -188,14 +188,14 @@ export default {
       merge(this.value, extendedDefaults);
 
       if (this.provider.startsWith('rke2')) {
-        this.$set(this.value.rke2IngressNginx, 'enabled', true);
-        this.$set(this.value.rke2Etcd, 'enabled', true);
-        this.$set(this.value.rkeEtcd, 'enabled', false);
+        this.value.rke2IngressNginx['enabled'] = true;
+        this.value.rke2Etcd['enabled'] = true;
+        this.value.rkeEtcd['enabled'] = false;
       } else if (this.provider.startsWith('rke')) {
-        this.$set(this.value, 'ingressNginx', this.value.ingressNginx || {});
-        this.$set(this.value.ingressNginx, 'enabled', true);
+        this.value['ingressNginx'] = this.value.ingressNginx || {};
+        this.value.ingressNginx['enabled'] = true;
       } else {
-        this.$set(this.value.rkeEtcd, 'enabled', false);
+        this.value.rkeEtcd['enabled'] = false;
       }
     }
 
@@ -224,6 +224,10 @@ export default {
 
     mergeValue(value, defaultValue) {
       return value === undefined || (typeof value === 'string' && !value.length) ? defaultValue : value;
+    },
+
+    onTabChanged() {
+      window.scrollTop = 0;
     }
   },
 };
@@ -238,111 +242,121 @@ export default {
     v-else
     class="config-monitoring-container"
   >
-    <Tab
-      name="general"
-      :label="t('monitoring.tabs.general')"
-      :weight="99"
+    <Tabbed
+      :side-tabs="true"
+      :hide-single-tab="true"
+      class="step__values__content with-name"
+      @changed="onTabChanged"
     >
-      <div>
-        <div class="row mb-20">
-          <div class="col span-6">
-            <ClusterSelector
-              :value="value"
-              :mode="mode"
-              @onClusterTypeChanged="clusterType = $event"
-            />
+      <Tab
+        name="general"
+        :label="t('monitoring.tabs.general')"
+        :weight="99"
+      >
+        <div>
+          <div class="row mb-20">
+            <div class="col span-6">
+              <ClusterSelector
+                :value="value"
+                :mode="mode"
+                @onClusterTypeChanged="clusterType = $event"
+              />
+            </div>
           </div>
-        </div>
-        <div
-          v-if="clusterType.group === 'managed'"
-          class="row mb-20"
-        >
-          <Checkbox
-            v-model="value.prometheusOperator.hostNetwork"
-            label-key="monitoring.hostNetwork.label"
-            :tooltip="t('monitoring.hostNetwork.tip', {}, true)"
-          />
-        </div>
-        <div class="row">
-          <div class="col span-6">
+          <div
+            v-if="clusterType.group === 'managed'"
+            class="row mb-20"
+          >
             <Checkbox
-              v-model="value.global.rbac.userRoles.create"
-              label-key="monitoring.createDefaultRoles.label"
-              :tooltip="t('monitoring.createDefaultRoles.tip', {}, true)"
+              v-model:value="value.prometheusOperator.hostNetwork"
+              label-key="monitoring.hostNetwork.label"
+              :tooltip="t('monitoring.hostNetwork.tip', {}, true)"
             />
           </div>
-          <div class="col span-6">
-            <Checkbox
-              v-model="value.global.rbac.userRoles.aggregateToDefaultRoles"
-              label-key="monitoring.aggregateDefaultRoles.label"
-              :tooltip="{
-                content: t('monitoring.aggregateDefaultRoles.tip', {}, true),
-                autoHide: false,
-              }"
-              :disabled="disableAggregateRoles"
-            />
+          <div class="row">
+            <div class="col span-6">
+              <Checkbox
+                v-model:value="value.global.rbac.userRoles.create"
+                label-key="monitoring.createDefaultRoles.label"
+                :tooltip="t('monitoring.createDefaultRoles.tip', {}, true)"
+              />
+            </div>
+            <div class="col span-6">
+              <Checkbox
+                v-model:value="value.global.rbac.userRoles.aggregateToDefaultRoles"
+                label-key="monitoring.aggregateDefaultRoles.label"
+                :tooltip="{
+                  content: t('monitoring.aggregateDefaultRoles.tip', {}, true),
+                  autoHide: false,
+                }"
+                :disabled="disableAggregateRoles"
+              />
+            </div>
           </div>
-        </div>
-        <div
-          v-if="provider === 'rke' && value.rkeEtcd"
-          class="row mt-20"
-        >
-          <div class="col span-6">
-            <LabeledInput
-              v-model="value.rkeEtcd.clients.https.certDir"
-              :label="t('monitoring.etcdNodeDirectory.label')"
-              :tooltip="t('monitoring.etcdNodeDirectory.tooltip', {}, true)"
-              :hover-tooltip="true"
-              :mode="mode"
-            />
+          <div
+            v-if="provider === 'rke' && value.rkeEtcd"
+            class="row mt-20"
+          >
+            <div class="col span-6">
+              <LabeledInput
+                v-model:value="value.rkeEtcd.clients.https.certDir"
+                :label="t('monitoring.etcdNodeDirectory.label')"
+                :tooltip="t('monitoring.etcdNodeDirectory.tooltip', {}, true)"
+                :hover-tooltip="true"
+                :mode="mode"
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </Tab>
-    <Tab
-      name="prometheus"
-      :label="t('monitoring.tabs.prometheus')"
-      :weight="98"
-    >
-      <div>
-        <Prometheus
-          v-model="value"
-          v-bind="$attrs"
-          :access-modes="accessModes"
-          :mode="mode"
-          :storage-classes="storageClasses"
-          :prometheus-pods="prometheusResources"
-          :filteredWorkloads="filteredWorkloads"
-        />
-      </div>
-    </Tab>
-    <Tab
-      name="alerting"
-      :label="t('monitoring.tabs.alerting')"
-      :weight="97"
-    >
-      <div>
-        <Alerting
-          v-model="value"
-          :mode="mode"
-          :monitoringSecrets="monitoringSecrets"
-        />
-      </div>
-    </Tab>
-    <Tab
-      name="grafana"
-      :label="t('monitoring.tabs.grafana')"
-      :weight="96"
-    >
-      <div>
-        <Grafana
-          v-model="value"
-          :access-modes="accessModes"
-          :mode="mode"
-          :pvcs="pvcs"
-          :storage-classes="storageClasses"
-        />
-      </div>
-    </Tab>
+      </Tab>
+      <Tab
+        name="prometheus"
+        :label="t('monitoring.tabs.prometheus')"
+        :weight="98"
+      >
+        <div>
+          <Prometheus
+            :value="value"
+            v-bind="$attrs"
+            :access-modes="accessModes"
+            :mode="mode"
+            :storage-classes="storageClasses"
+            :prometheus-pods="prometheusResources"
+            :filteredWorkloads="filteredWorkloads"
+            @update:value="$emit('input', $event)"
+          />
+        </div>
+      </Tab>
+      <Tab
+        name="alerting"
+        :label="t('monitoring.tabs.alerting')"
+        :weight="97"
+      >
+        <div>
+          <Alerting
+            :value="value"
+            :mode="mode"
+            :monitoringSecrets="monitoringSecrets"
+            @update:value="$emit('input', $event)"
+          />
+        </div>
+      </Tab>
+      <Tab
+        name="grafana"
+        :label="t('monitoring.tabs.grafana')"
+        :weight="96"
+      >
+        <div>
+          <Grafana
+            :value="value"
+            :access-modes="accessModes"
+            :mode="mode"
+            :pvcs="pvcs"
+            :storage-classes="storageClasses"
+            @update:value="$emit('input', $event)"
+          />
+        </div>
+      </Tab>
+    </Tabbed>
   </div>
 </template>

package/chart/monitoring/prometheus/index.vue

@@ -153,8 +153,8 @@ export default {
         storageSpec['selector'] = { matchExpressions: [], matchLabels: {} };
       }
 
-      this.$set(storageSpec.selector, 'matchLabels', matchLabels);
-      this.$set(storageSpec.selector, 'matchExpressions', matchExpressions);
+      storageSpec.selector['matchLabels'] = matchLabels;
+      storageSpec.selector['matchExpressions'] = matchExpressions;
 
       // Remove an empty selector object if present
       // User can add a selector and then remove the selector - this will leave an empty structure as above
@@ -193,8 +193,8 @@ export default {
           :raw="true"
         />
         <div
-          v-for="wl in mappedFilteredWorkloads"
-          :key="wl.id"
+          v-for="(wl, i) in mappedFilteredWorkloads"
+          :key="i"
           class="mt-10"
         >
           <router-link
@@ -210,13 +210,13 @@ export default {
       <div class="row">
         <div class="col span-6 col-full-height">
           <Checkbox
-            v-model="value.prometheus.prometheusSpec.enableAdminAPI"
+            v-model:value="value.prometheus.prometheusSpec.enableAdminAPI"
             :label="t('monitoring.prometheus.config.adminApi')"
           />
         </div>
         <div class="col span-6 col-full-height">
           <RadioGroup
-            v-model="value.prometheus.prometheusSpec.ignoreNamespaceSelectors"
+            v-model:value="value.prometheus.prometheusSpec.ignoreNamespaceSelectors"
             :mode="mode"
             name="ignoreNamespaceSelectors"
             label-key="monitoring.prometheus.config.ignoreNamespaceSelectors.label"
@@ -229,14 +229,14 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.scrapeInterval"
+            v-model:value="value.prometheus.prometheusSpec.scrapeInterval"
             :label="t('monitoring.prometheus.config.scrape')"
             :mode="mode"
           />
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.evaluationInterval"
+            v-model:value="value.prometheus.prometheusSpec.evaluationInterval"
             :label="t('monitoring.prometheus.config.evaluation')"
             :mode="mode"
           />
@@ -245,14 +245,14 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.retention"
+            v-model:value="value.prometheus.prometheusSpec.retention"
             :label="t('monitoring.prometheus.config.retention')"
             :mode="mode"
           />
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.retentionSize"
+            v-model:value="value.prometheus.prometheusSpec.retentionSize"
             :label="t('monitoring.prometheus.config.retentionSize')"
             :mode="mode"
           />
@@ -268,14 +268,14 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.resources.requests.cpu"
+            v-model:value="value.prometheus.prometheusSpec.resources.requests.cpu"
             :label="t('monitoring.prometheus.config.requests.cpu')"
             :mode="mode"
           />
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.resources.requests.memory"
+            v-model:value="value.prometheus.prometheusSpec.resources.requests.memory"
             :label="t('monitoring.prometheus.config.requests.memory')"
             :mode="mode"
           />
@@ -284,14 +284,14 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.resources.limits.cpu"
+            v-model:value="value.prometheus.prometheusSpec.resources.limits.cpu"
             :label="t('monitoring.prometheus.config.limits.cpu')"
             :mode="mode"
           />
         </div>
         <div class="col span-6">
           <LabeledInput
-            v-model="value.prometheus.prometheusSpec.resources.limits.memory"
+            v-model:value="value.prometheus.prometheusSpec.resources.limits.memory"
             :label="t('monitoring.prometheus.config.limits.memory')"
             :mode="mode"
           />
@@ -303,7 +303,7 @@ export default {
       >
         <div class="col span-6">
           <Checkbox
-            v-model="enablePersistentStorage"
+            v-model:value="enablePersistentStorage"
             data-testid="checkbox-chart-enable-persistent-storage"
             :label="t('monitoring.prometheus.storage.label')"
           />
@@ -313,7 +313,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledInput
-              v-model="value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec.resources.requests.storage"
+              v-model:value="value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec.resources.requests.storage"
               :label="t('monitoring.prometheus.storage.size')"
               :mode="mode"
             />
@@ -336,7 +336,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec.accessModes"
+              v-model:value="value.prometheus.prometheusSpec.storageSpec.volumeClaimTemplate.spec.accessModes"
               :label="t('monitoring.prometheus.storage.mode')"
               :localized-label="true"
               :mode="mode"
@@ -362,7 +362,7 @@ export default {
               :mode="mode"
               :value="matchExpressions"
               :show-remove="false"
-              @input="matchChanged($event)"
+              @update:value="matchChanged($event)"
             />
           </div>
         </div>

package/chart/rancher-backup/S3.vue

@@ -36,7 +36,7 @@ export default {
     this.$emit('valid', this.valid);
   },
 
-  beforeDestroy() {
+  beforeUnmount() {
     this.$emit('valid', true);
   },
 
@@ -57,8 +57,8 @@ export default {
       set(neu) {
         const { name, namespace } = neu.metadata;
 
-        this.$set(this.value, 'credentialSecretName', name);
-        this.$set(this.value, 'credentialSecretNamespace', namespace);
+        this.value['credentialSecretName'] = name;
+        this.value['credentialSecretNamespace'] = namespace;
       }
     },
     valid() {
@@ -72,7 +72,7 @@ export default {
       try {
         const encoded = btoa(ca);
 
-        this.$set(this.value, 'endpointCA', encoded);
+        this.value['endpointCA'] = encoded;
       } catch (e) {
         // eslint-disable-next-line no-console
         console.warn(e);
@@ -95,7 +95,7 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <ResourceLabeledSelect
-          v-model="credentialSecret"
+          v-model:value="credentialSecret"
           :get-option-label="opt=>opt.metadata.name || ''"
           option-key="id"
           :mode="mode"
@@ -105,7 +105,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.bucketName"
+          v-model:value="value.bucketName"
           data-testid="S3-bucketName"
           :mode="mode"
           :label="t('backupRestoreOperator.s3.bucketName')"
@@ -116,14 +116,14 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.region"
+          v-model:value="value.region"
           :mode="mode"
           :label="t('backupRestoreOperator.s3.region')"
         />
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.folder"
+          v-model:value="value.folder"
           :mode="mode"
           :label="t('backupRestoreOperator.s3.folder')"
         />
@@ -132,14 +132,14 @@ export default {
     <div class="row mb-10">
       <div class="col span-6">
         <LabeledInput
-          v-model="value.endpoint"
+          v-model:value="value.endpoint"
           :mode="mode"
           :label="t('backupRestoreOperator.s3.endpoint')"
           data-testid="S3-endpoint"
           required
         />
         <Checkbox
-          v-model="value.insecureTLSSkipVerify"
+          v-model:value="value.insecureTLSSkipVerify"
           class="mt-10"
           :mode="mode"
           :label="t('backupRestoreOperator.s3.insecureTLSSkipVerify')"
@@ -147,7 +147,7 @@ export default {
       </div>
       <div class="col span-6">
         <LabeledInput
-          v-model="value.endpointCA"
+          v-model:value="value.endpointCA"
           :mode="mode"
           type="multiline"
           :label="t('backupRestoreOperator.s3.endpointCA.label')"