@rancher/shell 1.2.5-rc.1 → 1.2.5

package/assets/translations/en-us.yaml

@@ -355,9 +355,8 @@ addClusterMemberDialog:
   title: Add Cluster Member
 
 addonConfigConfirmation:
-  title: Add-On Config Reset
-  body: Changing the Kubernetes Version can reset the Add-On Config values. You should check that the values are as expected before continuing.
-
+  title: Add-On Reset
+  body: Changing the Kubernetes Version can reset Add-On values. You should check that the values are as expected before continuing.
 addProjectMemberDialog:
   title: Add Project Member
 
@@ -1107,17 +1106,39 @@ cis:
 
 cluster:
   addonChart:
-    rancher-vsphere-cpi: vSphere CPI Configuration
-    rancher-vsphere-csi: vSphere CSI Configuration
-    rke2-calico: Calico Configuration
-    rke2-calico-crd: Calico Configuration
-    rke2-canal: Canal Configuration
-    rke2-cilium: Cilium Configuration
-    rke2-coredns: CoreDNS Configuration
-    rke2-ingress-nginx: NGINX Ingress Configuration
-    rke2-kube-proxy: Kube Proxy Configuration
-    rke2-metrics-server: Metrics Server Configuration
-    rke2-multus: Multus Configuration
+    rancher-vsphere-cpi:
+      label: "Add-on: vSphere CPI"
+      configuration: vSphere CPI
+    rancher-vsphere-csi:
+      label: "Add-on: vSphere CSI"
+      configuration: vSphere CSI
+    rke2-calico:
+      label: "Add-on: Calico"
+      configuration: Calico
+    rke2-calico-crd:
+      label:  "Add-on: Calico"
+      configuration: Calico
+    rke2-canal:
+      label: "Add-on: Canal"
+      configuration: Canal
+    rke2-cilium:
+      label: "Add-on: Cilium"
+      configuration: Cilium
+    rke2-coredns:
+      label: "Add-on: CoreDNS"
+      configuration: CoreDNS
+    rke2-ingress-nginx:
+      label: "Add-on: NGINX"
+      configuration: NGINX Ingress
+    rke2-kube-proxy:
+      label: "Add-on: Kube Proxy"
+      configuration: Kube Proxy
+    rke2-metrics-server:
+      label: "Add-on: Metrics Server"
+      configuration: Metrics Server
+    rke2-multus:
+      label: "Add-on: Multus"
+      configuration: Multus
   agentEnvVars:
     label: Agent Environment
     detail: Add additional environment variables to the agent container.  This is most commonly useful for configuring a HTTP proxy.
@@ -1133,7 +1154,7 @@ cluster:
       label: Google
     rancher-vsphere:
       label: vSphere
-      note: '<b>Important:</b> Configure the vSphere Cloud Provider and Storage Provider options in the Add-On Config tab.'
+      note: '<b>Important:</b> Configure the vSphere Cloud Provider and Storage Provider options in the Add-on tabs.'
     harvester:
       label: Harvester
   copyConfig: Copy KubeConfig to Clipboard
@@ -1279,8 +1300,10 @@ cluster:
         macAddress: Mac Address
         macFormat: 'Invalid MAC address format.'
       vGpus:
+        warnings:
+          minimumAllocatable: It's highly recommended to select a vGPU with a number of allocatable devices greater than the number of nodes (Machine Count) to avoid "un-schedulable" errors after cluster updates.
         errors:
-          notAllocatable: '"VGPUs" not allocatable. There are not enough [{vGpus}] devices to be allocated to each node in machine pool [{pool}]'
+          notAllocatable: '[{vGpu}] vGPU device is not allocatable; required: {allocated}, allocatable: {allocatable}'
       volume:
         title: Volumes
         volume: Volume
@@ -1633,7 +1656,7 @@ cluster:
       serverOs:
         label: OS
   addOns:
-    dependencyBanner: Add-On Configurations can vary between Kubernetes versions. Changing the Kubernetes version may reset the values below.
+    dependencyBanner: Add-On Configuration can vary between Kubernetes versions. Changing the Kubernetes version may reset the values below.
     additionalManifest:
       title: Additional Manifest
       tooltip: 'Additional Kubernetes Manifest YAML to be applied to the cluster on startup.'
@@ -1981,7 +2004,7 @@ cluster:
       s3: s3
   tabs:
     ace: Authorized Endpoint
-    addons: Add-On Config
+    addOnAdditionalManifest: Additional Manifest
     advanced: Advanced
     agentEnv: Agent Environment Vars
     basic: Basics

package/components/nav/Header.vue

@@ -178,12 +178,16 @@ export default {
       }
     },
     // since the Header is a "persistent component" we need to update it at every route change...
-    $route(nue) {
-      if (nue) {
-        this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
+    $route: {
+      handler(nue) {
+        if (nue) {
+          this.extensionHeaderActions = getApplicableExtensionEnhancements(this, ExtensionPoint.ACTION, ActionLocation.HEADER, nue);
 
-        this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
-      }
+          this.navHeaderRight = this.$plugin?.getDynamic('component', 'NavHeaderRight');
+        }
+      },
+      immediate: true,
+      deep:      true,
     }
   },
 

package/detail/catalog.cattle.io.app.vue

@@ -9,7 +9,8 @@ import RelatedResources from '@shell/components/RelatedResources';
 import jsyaml from 'js-yaml';
 import merge from 'lodash/merge';
 import { CATALOG } from '@shell/config/types';
-import { sortBy } from '~shell/utils/sort';
+import { sortBy } from '@shell/utils/sort';
+import { allHash } from '@shell/utils/promise';
 
 export default {
   name: 'DetailRelease',
@@ -30,9 +31,15 @@ export default {
   },
 
   async fetch() {
-    await this.$store.dispatch('catalog/load', { force: true, reset: true });
+    const promises = {
+      catalog:       this.$store.dispatch('catalog/load', { force: true, reset: true }),
+      allOperations: this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION }),
+      secrets:       this.value.fetchValues(true),
+    };
 
-    this.allOperations = await this.$store.dispatch('cluster/findAll', { type: CATALOG.OPERATION });
+    const res = await allHash(promises);
+
+    this.allOperations = res.allOperations;
   },
 
   computed: {
@@ -45,7 +52,7 @@ export default {
     },
 
     valuesYaml() {
-      const combined = merge(merge({}, this.value?.spec?.chart?.values || {}), this.value?.spec?.values || {});
+      const combined = merge(merge({}, this.value?.chartValues || {}), this.value?.values || {});
 
       return jsyaml.dump(combined);
     },
@@ -95,6 +102,12 @@ export default {
       }
     },
   },
+
+  watch: {
+    'value.secretId'(neu, old) {
+      this.value.fetchValues(true);
+    }
+  },
 };
 </script>
 

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

@@ -28,9 +28,8 @@ import {
 import { allHash } from '@shell/utils/promise';
 import { sortBy } from '@shell/utils/sort';
 
-import { camelToTitle } from '@shell/utils/string';
 import { compare, sortable } from '@shell/utils/version';
-import { isHarvesterSatisfiesVersion } from '@shell/utils/cluster';
+import { isHarvesterSatisfiesVersion, labelForAddon } from '@shell/utils/cluster';
 import * as VERSION from '@shell/utils/version';
 
 import ArrayList from '@shell/components/form/ArrayList';
@@ -74,6 +73,9 @@ import { getApplicableExtensionEnhancements } from '@shell/core/plugin-helpers';
 import { ExtensionPoint, TabLocation } from '@shell/core/types';
 import MemberRoles from '@shell/edit/provisioning.cattle.io.cluster/MemberRoles';
 import Basics from '@shell/edit/provisioning.cattle.io.cluster/Basics';
+import AddOnConfig from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnConfig';
+import AddOnAdditionalManifest from '@shell/edit/provisioning.cattle.io.cluster/tabs/AddOnAdditionalManifest';
+import VsphereUtils from '@shell/utils/v-sphere';
 
 const HARVESTER = 'harvester';
 const HARVESTER_CLOUD_PROVIDER = 'harvester-cloud-provider';
@@ -132,7 +134,9 @@ export default {
     UnitInput,
     YamlEditor,
     MemberRoles,
-    Basics
+    Basics,
+    AddOnConfig,
+    AddOnAdditionalManifest
   },
 
   mixins: [CreateEditView, FormValidation],
@@ -250,6 +254,7 @@ export default {
       machinePoolErrors:     {},
       allNamespaces:         [],
       extensionTabs:         getApplicableExtensionEnhancements(this, ExtensionPoint.TAB, TabLocation.CLUSTER_CREATE_RKE2, this.$route, this),
+      labelForAddon,
     };
   },
 
@@ -835,6 +840,8 @@ export default {
   created() {
     this.registerBeforeHook(this.saveMachinePools, 'save-machine-pools', 1);
     this.registerBeforeHook(this.setRegistryConfig, 'set-registry-config');
+    this.registerBeforeHook(this.handleVsphereCpiSecret, 'sync-vsphere-cpi');
+    this.registerBeforeHook(this.handleVsphereCsiSecret, 'sync-vsphere-csi');
     this.registerAfterHook(this.cleanupMachinePools, 'cleanup-machine-pools');
     this.registerAfterHook(this.saveRoleBindings, 'save-role-bindings');
 
@@ -847,6 +854,13 @@ export default {
   methods: {
     set,
 
+    async handleVsphereCpiSecret() {
+      return VsphereUtils.handleVsphereCpiSecret(this);
+    },
+    async handleVsphereCsiSecret() {
+      return VsphereUtils.handleVsphereCsiSecret(this);
+    },
+
     /**
      * Initialize all the cluster specs
      */
@@ -1549,30 +1563,34 @@ export default {
       }
     },
 
-    labelForAddon(name) {
-      const fallback = `${ camelToTitle(name.replace(/^(rke|rke2|rancher)-/, '')) } Configuration`;
-
-      return this.$store.getters['i18n/withFallback'](`cluster.addonChart."${ name }"`, null, fallback);
-    },
-
-    showAddons() {
+    showAddons(key) {
       this.addonsRev++;
       this.addonNames.forEach((name) => {
         const chartValues = this.versionInfo[name]?.questions ? this.initYamlEditor(name) : {};
 
         set(this.userChartValuesTemp, name, chartValues);
       });
-      this.refreshYamls();
+      this.refreshComponentWithYamls(key);
+    },
+
+    refreshComponentWithYamls(key) {
+      const component = this.$refs[key];
+
+      if (Array.isArray(component) && component.length > 0) {
+        this.refreshYamls(component[0].$refs);
+      } else if (component) {
+        this.refreshYamls(component.$refs);
+      }
     },
 
-    refreshYamls() {
-      const keys = Object.keys(this.$refs).filter((x) => x.startsWith('yaml'));
+    refreshYamls(refs) {
+      const keys = Object.keys(refs).filter((x) => x.startsWith('yaml'));
 
-      for ( const k of keys ) {
-        const entry = this.$refs[k];
+      for (const k of keys) {
+        const entry = refs[k];
         const list = isArray(entry) ? entry : [entry];
 
-        for ( const component of list ) {
+        for (const component of list) {
           component?.refresh(); // `yaml` ref can be undefined on switching from Basic to Addon tab (Azure --> Amazon --> addon)
         }
       }
@@ -2005,6 +2023,10 @@ export default {
       }
     },
 
+    updateAdditionalManifest(neu) {
+      this.value.spec.rkeConfig.additionalManifest = neu;
+    },
+
     /**
      * Keep last PSP value
      */
@@ -2279,7 +2301,7 @@ export default {
           name="basic"
           label-key="cluster.tabs.basic"
           :weight="11"
-          @active="refreshYamls"
+          @active="refreshComponentWithYamls('tab-Basics')"
         >
           <!-- Basic -->
           <Basics
@@ -2665,68 +2687,43 @@ export default {
           </template>
         </Tab>
 
-        <!-- Add-on Config -->
+        <!-- Add-on Configs -->
         <Tab
-          name="addons"
-          label-key="cluster.tabs.addons"
-          @active="showAddons"
+          v-for="v in addonVersions"
+          :key="v.name"
+          :name="v.name"
+          :label="labelForAddon(v.name, false)"
+          :weight="9"
+          :showHeader="false"
+          @active="showAddons(v.name)"
         >
-          <Banner
-            v-if="isEdit"
-            color="warning"
-          >
-            {{ t('cluster.addOns.dependencyBanner') }}
-          </Banner>
-          <div
-            v-if="versionInfo && addonVersions.length"
-            :key="addonsRev"
-          >
-            <div
-              v-for="v in addonVersions"
-              :key="v._key"
-            >
-              <h3>{{ labelForAddon(v.name) }}</h3>
-              <Questions
-                v-if="versionInfo[v.name] && versionInfo[v.name].questions && v.name && userChartValuesTemp[v.name]"
-                v-model="userChartValuesTemp[v.name]"
-                :emit="true"
-                in-store="management"
-                :mode="mode"
-                :tabbed="false"
-                :source="versionInfo[v.name]"
-                :target-namespace="value.metadata.namespace"
-                @updated="updateQuestions(v.name)"
-              />
-              <YamlEditor
-                v-else
-                ref="yaml-values"
-                :value="initYamlEditor(v.name)"
-                :scrolling="true"
-                :as-object="true"
-                :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-                :hide-preview-buttons="true"
-                @input="data => updateValues(v.name, data)"
-              />
-              <div class="spacer" />
-            </div>
-          </div>
+          <AddOnConfig
+            :ref="v.name"
+            v-model="value"
+            :mode="mode"
+            :version-info="versionInfo"
+            :addon-version="v"
+            :addons-rev="addonsRev"
+            :user-chart-values-temp="userChartValuesTemp"
+            :init-yaml-editor="initYamlEditor"
+            @update-questions="syncChartValues"
+            @update-values="updateValues"
+          />
+        </Tab>
 
-          <div>
-            <h3>
-              {{ t('cluster.addOns.additionalManifest.title') }}
-              <i
-                v-clean-tooltip="t('cluster.addOns.additionalManifest.tooltip')"
-                class="icon icon-info"
-              />
-            </h3>
-            <YamlEditor
-              ref="yaml-additional"
-              v-model="rkeConfig.additionalManifest"
-              :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
-              initial-yaml-values="# Additional Manifest YAML"
-              class="yaml-editor"
-            />
-          </div>
+        <!-- Add-on Additional Manifest -->
+        <Tab
+          name="additionalmanifest"
+          label-key="cluster.tabs.addOnAdditionalManifest"
+          :showHeader="false"
+          @active="refreshComponentWithYamls('additionalmanifest')"
+        >
+          <AddOnAdditionalManifest
+            ref="additionalmanifest"
+            :value="value"
+            :mode="mode"
+            @additional-manifest-changed="updateAdditionalManifest"
+          />
         </Tab>
 
         <!-- Cluster Agent Configuration -->
@@ -2763,7 +2760,6 @@ export default {
           name="advanced"
           label-key="cluster.tabs.advanced"
           :weight="-1"
-          @active="refreshYamls"
         >
           <template v-if="haveArgInfo">
             <h3>{{ t('cluster.advanced.argInfo.title') }}</h3>

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

@@ -0,0 +1,45 @@
+<script>
+import YamlEditor from '@shell/components/YamlEditor';
+export default {
+  components: { YamlEditor },
+  props:      {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    }
+  },
+  computed: {
+    additionalManifest: {
+      get() {
+        return this.value.spec.rkeConfig.additionalManifest;
+      },
+      set(neu) {
+        this.$emit('additional-manifest-changed', neu);
+      }
+    }
+  }
+};
+</script>
+
+<template>
+  <div>
+    <h3>
+      {{ t('cluster.addOns.additionalManifest.title') }}
+      <i
+        v-clean-tooltip="t('cluster.addOns.additionalManifest.tooltip')"
+        class="icon icon-info"
+      />
+    </h3>
+    <YamlEditor
+      ref="yaml-additional"
+      v-model="additionalManifest"
+      :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+      initial-yaml-values="# Additional Manifest YAML"
+      class="yaml-editor"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,97 @@
+<script>
+import { Banner } from '@components/Banner';
+
+import Questions from '@shell/components/Questions';
+import YamlEditor from '@shell/components/YamlEditor';
+import { labelForAddon } from '@shell/utils/cluster';
+import { _EDIT } from '@shell/config/query-params';
+
+export default {
+  components: {
+    Banner,
+    Questions,
+    YamlEditor
+  },
+
+  props: {
+    mode: {
+      type:     String,
+      required: true,
+    },
+    value: {
+      type:     Object,
+      required: true,
+    },
+    versionInfo: {
+      type:     Object,
+      required: true,
+    },
+    addonVersion: {
+      type:     Object,
+      required: false,
+      default:  null
+    },
+    addonsRev: {
+      type:     Number,
+      required: true,
+    },
+    userChartValuesTemp: {
+      type:     Object,
+      required: true,
+    },
+    initYamlEditor: {
+      type:     Function,
+      required: true,
+    }
+  },
+
+  data() {
+    return { labelForAddon };
+  },
+
+  computed: {
+    isEdit() {
+      return this.mode === _EDIT;
+    },
+  }
+};
+</script>
+
+<template>
+  <div>
+    <Banner
+      v-if="isEdit"
+      color="warning"
+    >
+      {{ t('cluster.addOns.dependencyBanner') }}
+    </Banner>
+    <div
+      v-if="versionInfo && addonVersion"
+      :key="addonsRev"
+    >
+      <h3>{{ labelForAddon(addonVersion.name) }}</h3>
+      <Questions
+        v-if="versionInfo[addonVersion.name] && versionInfo[addonVersion.name].questions && addonVersion.name && userChartValuesTemp[addonVersion.name]"
+        v-model="userChartValuesTemp[addonVersion.name]"
+        :emit="true"
+        in-store="management"
+        :mode="mode"
+        :tabbed="false"
+        :source="versionInfo[addonVersion.name]"
+        :target-namespace="value.metadata.namespace"
+        @updated="$emit('update-questions', addonVersion.name)"
+      />
+      <YamlEditor
+        v-else
+        ref="yaml-values"
+        :value="initYamlEditor(addonVersion.name)"
+        :scrolling="true"
+        :as-object="true"
+        :editor-mode="mode === 'view' ? 'VIEW_CODE' : 'EDIT_CODE'"
+        :hide-preview-buttons="true"
+        @input="data => $emit('update-values', addonVersion.name, data)"
+      />
+      <div class="spacer" />
+    </div>
+  </div>
+</template>

package/mixins/chart.js

@@ -263,6 +263,8 @@ export default {
             id:   `${ this.query.appNamespace }/${ this.query.appName }`,
           });
 
+          await this.existing?.fetchValues(true);
+
           this.mode = _EDIT;
         } catch (e) {
           this.mode = _CREATE;
@@ -420,10 +422,12 @@ export default {
               }
             }
             if (existingCRDApp) {
+              await existingCRDApp.fetchValues(true);
+
               // spec.values are any non-default values the user configured
               // the installation form should show these, as well as any default values from the chart
-              const existingValues = clone(existingCRDApp.spec?.values || {});
-              const defaultValues = clone(existingCRDApp.spec?.chart?.values || {});
+              const existingValues = clone(existingCRDApp.values || {});
+              const defaultValues = clone(existingCRDApp.chartValues || {});
 
               crdVersionInfo.existingValues = existingValues;
               crdVersionInfo.allValues = merge(defaultValues, existingValues);