@rancher/shell 3.0.7 → 3.0.8-rc.10

package/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue

@@ -2,18 +2,25 @@
 import { LabeledInput } from '@components/Form/LabeledInput';
 import { Banner } from '@components/Banner';
 import { Checkbox } from '@components/Form/Checkbox';
-import { _EDIT, _VIEW } from '@shell/config/query-params';
+import { _EDIT, _VIEW, _CREATE } from '@shell/config/query-params';
 import ArrayList from '@shell/components/form/ArrayList';
 import ACE from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/ACE';
+import LabeledSelect from '@shell/components/form/LabeledSelect';
 
 const NETBIOS_TRUNCATION_LENGTH = 15;
 
+export const STACK_PREFS = {
+  IPV4: 'ipv4',
+  IPV6: 'ipv6',
+  DUAL: 'dual'
+};
+
 export default {
   emits: [
     'update:value', 'cluster-cidr-changed', 'local-cluster-auth-endpoint-changed',
     'service-cidr-changed', 'cluster-domain-changed', 'cluster-dns-changed',
     'truncate-hostname-changed', 'ca-certs-changed', 'service-node-port-range-changed',
-    'fqdn-changed', 'tls-san-changed'
+    'fqdn-changed', 'tls-san-changed', 'stack-preference-changed', 'validationChanged'
   ],
 
   components: {
@@ -21,7 +28,8 @@ export default {
     Banner,
     Checkbox,
     ArrayList,
-    ACE
+    ACE,
+    LabeledSelect
   },
 
   props: {
@@ -34,17 +42,28 @@ export default {
       type:     Object,
       required: true,
     },
+
     selectedVersion: {
       type:     Object,
       required: true,
     },
+
     truncateLimit: {
       type:     Number,
       required: false,
       default:  0
+    },
+
+    hasSomeIpv6Pools: {
+      type:    Boolean,
+      default: false
     }
   },
 
+  data() {
+    return { STACK_PREFS };
+  },
+
   computed: {
     truncateHostnames() {
       return this.truncateLimit === NETBIOS_TRUNCATION_LENGTH;
@@ -55,7 +74,20 @@ export default {
     serverArgs() {
       return this.selectedVersion?.serverArgs || {};
     },
-
+    stackPreferenceOptions() {
+      return [{
+        label: this.t('cluster.rke2.stackPreference.options.ipv4'),
+        value: STACK_PREFS.IPV4
+      },
+      {
+        label: this.t('cluster.rke2.stackPreference.options.ipv6'),
+        value: STACK_PREFS.IPV6
+      }, {
+        label: this.t('cluster.rke2.stackPreference.options.dual'),
+        value: STACK_PREFS.DUAL
+      },
+      ];
+    },
     showIpv6Warning() {
       const clusterCIDR = this.serverConfig['cluster-cidr'] || '';
       const serviceCIDR = this.serverConfig['service-cidr'] || '';
@@ -79,6 +111,36 @@ export default {
         this.$emit('update:value', newValue);
       }
     },
+
+    stackPreference: {
+      get() {
+        return this.localValue.spec?.networking?.stackPreference || STACK_PREFS.IPV4;
+      },
+      set(neu) {
+        if (!this.localValue.spec.networking) {
+          this.localValue.spec.networking = {};
+        }
+        this.localValue.spec.networking.stackPreference = neu;
+      }
+    },
+  },
+
+  methods: {
+    // if ipv6 pools are detected, we enforce dual-stack or ipv6 stack prefs.
+    // If ipv6 pools are not detected we don't know for sure they aren't there so we don't validate the input
+    // also not validating the input when editing existing clusters to ensure we don't prevent editing clusters using dual-stack VPCs provisioned before the ipv6 feature was added
+    stackPreferenceValidator(val) {
+      const value = val?.value || val;
+      let isValid;
+
+      if (this.hasSomeIpv6Pools && this.mode === _CREATE) {
+        isValid = value !== STACK_PREFS.IPV4;
+
+        return isValid ? null : this.t('cluster.rke2.stackPreference.errorNeedsIpv6');
+      } else {
+        return null;
+      }
+    }
   }
 };
 </script>
@@ -95,6 +157,7 @@ export default {
     <Banner
       v-if="showIpv6Warning"
       color="warning"
+      data-testid="network-tab-ipv6StackPreferenceWarning"
     >
       {{ t('cluster.rke2.address.ipv6.warning') }}
     </Banner>
@@ -210,5 +273,30 @@ export default {
       @caCerts-changed="$emit('ca-certs-changed', $event)"
       @local-cluster-auth-endpoint-changed="$emit('local-cluster-auth-endpoint-changed', $event)"
     />
+
+    <h3
+      v-t="'cluster.rke2.stackPreference.label'"
+      class="mt-20"
+    />
+    <t
+      k="cluster.rke2.stackPreference.description"
+      raw
+      class="text-muted"
+    />
+    <div class="ro mt-10 mb-20">
+      <div class="col span-3">
+        <LabeledSelect
+          :key="hasSomeIpv6Pools"
+          :value="localValue?.spec?.rkeConfig?.networking?.stackPreference || STACK_PREFS.IPV4"
+          :mode="mode"
+          :options="stackPreferenceOptions"
+          :rules="[stackPreferenceValidator]"
+          data-testid="network-tab-stackpreferences"
+          :require-dirty="false"
+          @selecting="e=>$emit('stack-preference-changed', e)"
+          @update:validation="e=>$emit('validationChanged', e)"
+        />
+      </div>
+    </div>
   </div>
 </template>

package/edit/secret/index.vue

@@ -485,7 +485,7 @@ export default {
         v-else
         :side-tabs="true"
         :use-hash="useTabbedHash"
-        default-tab="data"
+        :default-tab="defaultTab || 'data'"
       >
         <Tab
           name="data"

package/edit/service.vue

@@ -272,10 +272,14 @@ export default {
 
     async loadPods() {
       try {
-        const hash = {
-          provClusters:     this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER }),
-          harvesterConfigs: this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG }),
-        };
+        const hash = {};
+
+        if (this.$store.getters[`management/canList`](CAPI.RANCHER_CLUSTER)) {
+          hash.provClusters = this.$store.dispatch('management/findAll', { type: CAPI.RANCHER_CLUSTER });
+        }
+        if (this.$store.getters[`management/canList`](HCI.HARVESTER_CONFIG)) {
+          hash.harvesterConfigs = this.$store.dispatch(`management/findAll`, { type: HCI.HARVESTER_CONFIG });
+        }
 
         await allHash(hash);
         this.updateMatchingPods();
@@ -347,6 +351,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         v-if="checkTypeIs('ExternalName')"

package/edit/serviceaccount.vue

@@ -145,6 +145,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="data"

package/edit/storage.k8s.io.storageclass/index.vue

@@ -240,6 +240,7 @@ export default {
     <Tabbed
       :side-tabs="true"
       :use-hash="useTabbedHash"
+      :default-tab="defaultTab"
     >
       <Tab
         name="parameters"

package/edit/workload/index.vue

@@ -152,9 +152,10 @@ export default {
         ref="containersTabbed"
         class="deployment-tabs"
         :show-tabs-add-remove="true"
-        :default-tab="defaultTab"
+        :default-tab="defaultTab || defaultWorkloadTab"
         :flat="true"
         :use-hash="useTabbedHash"
+
         data-testid="workload-horizontal-tabs"
         @changed="changed"
       >

package/edit/workload/mixins/workload.js

@@ -292,7 +292,7 @@ export default {
       return { general: this.fvGetPathErrors(['image'])?.length > 0 };
     },
 
-    defaultTab() {
+    defaultWorkloadTab() {
       if (!!this.$route.query.sidecar || this.$route.query.init || this.mode === _CREATE) {
         const container = this.allContainers.find((c) => c.__active);
 

package/initialize/App.vue

@@ -1,5 +1,5 @@
 <script>
-import NuxtLoading from '@shell/components/nav/GlobalLoading.vue';
+import GlobalLoading from '@shell/components/nav/GlobalLoading.vue';
 
 import '@shell/assets/styles/app.scss';
 
@@ -55,12 +55,12 @@ export default {
     },
   },
 
-  components: { NuxtLoading }
+  components: { GlobalLoading }
 };
 </script>
 <template>
-  <div id="__nuxt">
-    <NuxtLoading ref="loading" />
+  <div id="__root">
+    <GlobalLoading ref="loading" />
     <div
       id="__layout"
     >

package/initialize/install-directives.js

@@ -11,6 +11,7 @@ import positiveIntNumberDirective from '@shell/directives/positive-int-number.js
 import trimWhitespaceDirective from '@shell/directives/trim-whitespace';
 import intNumberDirective from '@shell/directives/int-number';
 import htmlStrippedAriaLabelDirective from '@shell/directives/strip-html-aria-label';
+import uiContextDirective from '@shell/directives/ui-context';
 
 /**
  * Prevent extensions from overriding existing directives
@@ -49,6 +50,7 @@ function addDirectives(vueApp) {
   vueApp.directive('intNumber', intNumberDirective);
   vueApp.directive('positiveIntNumber', positiveIntNumberDirective);
   vueApp.directive('stripped-aria-label', htmlStrippedAriaLabelDirective);
+  vueApp.directive('ui-context', uiContextDirective);
 }
 
 /**

package/initialize/install-plugins.js

@@ -17,7 +17,7 @@ import axiosShell from '@shell/plugins/axios';
 import codeMirror from '@shell/plugins/codemirror-loader';
 import { InstallCodeMirror } from 'codemirror-editor-vue3';
 import * as intNumber from '@shell/directives/int-number';
-import nuxtClientInit from '@shell/plugins/nuxt-client-init';
+import dashboardClientInit from '@shell/plugins/dashboard-client-init';
 import plugin from '@shell/plugins/plugin';
 import plugins from '@shell/core/plugins.js';
 import pluginsLoader from '@shell/core/plugins-loader.js';
@@ -30,6 +30,8 @@ import internalApiPlugin from '@shell/plugins/internal-api';
 import 'floating-vue/dist/style.css';
 import { floatingVueOptions } from '@shell/plugins/floating-vue';
 
+import dynamicContent from '@shell/plugins/dynamic-content';
+
 export async function installPlugins(vueApp) {
   vueApp.use(globalFormatters);
   vueApp.use(PortalVue);
@@ -46,7 +48,22 @@ export async function installPlugins(vueApp) {
 }
 
 export async function installInjectedPlugins(app, vueApp) {
-  const pluginDefinitions = [config, axios, plugins, pluginsLoader, axiosShell, intNumber, codeMirror, nuxtClientInit, replaceAll, plugin, steveCreateWorker, emberCookie, internalApiPlugin];
+  const pluginDefinitions = [
+    config,
+    axios,
+    plugins,
+    pluginsLoader,
+    axiosShell,
+    intNumber,
+    codeMirror,
+    dashboardClientInit,
+    replaceAll,
+    plugin,
+    steveCreateWorker,
+    emberCookie,
+    internalApiPlugin,
+    dynamicContent,
+  ];
 
   const installations = pluginDefinitions.map(async(pluginDefinition) => {
     if (typeof pluginDefinition === 'function') {

package/list/projectsecret.vue

@@ -199,7 +199,7 @@ export default {
         }
 
         // Filter in if this cluster
-        if (metadata.namespace.startsWith(this.currentCluster.id)) {
+        if (metadata.namespace?.startsWith(this.currentCluster.id)) {
           return true;
         }
 

package/list/provisioning.cattle.io.cluster.vue

@@ -10,6 +10,8 @@ import { mapFeature, HARVESTER as HARVESTER_FEATURE } from '@shell/store/feature
 import { NAME as EXPLORER } from '@shell/config/product/explorer';
 import ResourceFetch from '@shell/mixins/resource-fetch';
 import { BadgeState } from '@components/BadgeState';
+import { isAutoscalerFeatureFlagEnabled } from '@shell/utils/autoscaler-utils';
+import { AUTOSCALER_ENABLED } from '@shell/config/table-headers';
 
 export default {
   components: {
@@ -153,6 +155,16 @@ export default {
       return this.filteredRows.some((c) => c.metadata.namespace !== 'fleet-local' && c.metadata.namespace !== 'fleet-default');
     },
 
+    headers() {
+      const headers = this.$store.getters['type-map/headersFor'](this.schema);
+
+      if (isAutoscalerFeatureFlagEnabled(this.$store)) {
+        headers.splice(-3, 0, AUTOSCALER_ENABLED);
+      }
+
+      return headers;
+    }
+
   },
 
   $loadingResources() {
@@ -201,7 +213,8 @@ export default {
     </Masthead>
 
     <ResourceTable
-      :schema="schema"
+      :headers="headers"
+      :table-actions="true"
       :rows="filteredRows"
       :namespaced="nonStandardNamespaces"
       :loading="loading"
@@ -237,7 +250,7 @@ export default {
       </template>
       <template #cell:explorer="{row}">
         <router-link
-          v-if="row.mgmt && row.mgmt.isReady && !row.hasError"
+          v-if="row.canExplore"
           data-testid="cluster-manager-list-explore-management"
           class="btn btn-sm role-secondary"
           :to="{name: 'c-cluster', params: {cluster: row.mgmt.id}}"

package/machine-config/amazonec2.vue

@@ -10,20 +10,22 @@ import { RadioGroup } from '@components/Form/Radio';
 import { Checkbox } from '@components/Form/Checkbox';
 import { NORMAN } from '@shell/config/types';
 import { allHash } from '@shell/utils/promise';
-import { addObject, addObjects, findBy } from '@shell/utils/array';
 import { convertStringToKV, convertKVToString } from '@shell/utils/object';
 import { sortBy } from '@shell/utils/sort';
 import { stringify, exceptionToErrorsArray } from '@shell/utils/error';
+import EC2Networking from './components/EC2Networking.vue';
 
 const DEFAULT_GROUP = 'rancher-nodes';
 
 export default {
   components: {
-    Banner, Loading, LabeledInput, LabeledSelect, Checkbox, RadioGroup, UnitInput, KeyValue
+    Banner, Loading, LabeledInput, LabeledSelect, Checkbox, RadioGroup, UnitInput, KeyValue, EC2Networking,
   },
 
   mixins: [CreateEditView],
 
+  emits: ['validationChanged', 'update:hasIpv6'],
+
   props: {
     uuid: {
       type:     String,
@@ -44,6 +46,21 @@ export default {
       type:    Boolean,
       default: false
     },
+
+    hasIpv6: {
+      type:    Boolean,
+      default: false
+    },
+
+    machinePools: {
+      type:    Array,
+      default: () => []
+    },
+
+    poolCreateMode: {
+      type:    Boolean,
+      default: true
+    },
   },
 
   async fetch() {
@@ -108,7 +125,6 @@ export default {
         this.value['instanceType'] = this.$store.getters['aws/defaultInstanceType'];
       }
 
-      this.initNetwork();
       this.initTags();
 
       if ( !this.value.securityGroup?.length ) {
@@ -204,65 +220,6 @@ export default {
       }).sort();
     },
 
-    networkOptions() {
-      if ( !this.vpcInfo || !this.subnetInfo ) {
-        return [];
-      }
-
-      let vpcs = [];
-      const subnetsByVpc = {};
-
-      for ( const obj of this.vpcInfo.Vpcs ) {
-        const name = obj.Tags && obj.Tags?.length ? obj.Tags.find((t) => t.Key === 'Name')?.Value : null;
-
-        vpcs.push({
-          label:     name || obj.VpcId,
-          subLabel:  name ? obj.VpcId : obj.CidrBlock,
-          isDefault: obj.IsDefault || false,
-          kind:      'vpc',
-          value:     obj.VpcId,
-        });
-      }
-
-      vpcs = sortBy(vpcs, ['isDefault:desc', 'label']);
-
-      for ( const obj of this.subnetInfo.Subnets ) {
-        if ( obj.AvailabilityZone !== `${ this.value.region }${ this.value.zone }` ) {
-          continue;
-        }
-
-        let entry = subnetsByVpc[obj.VpcId];
-
-        if ( !entry ) {
-          entry = [];
-          subnetsByVpc[obj.VpcId] = entry;
-        }
-
-        const name = obj.Tags && obj.Tags?.length ? obj.Tags.find((t) => t.Key === 'Name')?.Value : null;
-
-        entry.push({
-          label:     name || obj.SubnetId,
-          subLabel:  name ? obj.SubnetId : obj.CidrBlock,
-          kind:      'subnet',
-          isDefault: obj.DefaultForAz || false,
-          value:     obj.SubnetId,
-          vpcId:     obj.VpcId,
-        });
-      }
-
-      const out = [];
-
-      for ( const obj of vpcs ) {
-        addObject(out, obj);
-
-        if ( subnetsByVpc[obj.value] ) {
-          addObjects(out, sortBy(subnetsByVpc[obj.value], ['isDefault:desc', 'label']));
-        }
-      }
-
-      return out;
-    },
-
     securityGroupOptions() {
       if ( !this.securityGroupInfo ) {
         return [];
@@ -304,7 +261,6 @@ export default {
     },
 
     'value.region'() {
-      this.updateNetwork();
       this.$fetch();
     },
 
@@ -320,34 +276,6 @@ export default {
   methods: {
     stringify,
 
-    initNetwork() {
-      const id = this.value.subnetId || this.value.vpcId;
-
-      this.selectedNetwork = id;
-    },
-
-    updateNetwork(value) {
-      let obj;
-
-      if ( value ) {
-        obj = findBy(this.networkOptions, 'value', value);
-      }
-
-      if ( obj?.kind === 'subnet' ) {
-        this.value.subnetId = value;
-        this.value.vpcId = obj.vpcId;
-        this.selectedNetwork = value;
-      } else if ( obj ) {
-        this.value.subnetId = null;
-        this.value.vpcId = value;
-        this.selectedNetwork = value;
-      } else {
-        this.value.subnetId = null;
-        this.value.vpcId = null;
-        this.selectedNetwork = null;
-      }
-    },
-
     initTags() {
       this.tags = convertStringToKV(this.value.tags);
     },
@@ -359,7 +287,7 @@ export default {
     test() {
       const errors = [];
 
-      if (!this.selectedNetwork) {
+      if (!this.value.subnetId && !this.value.vpcId) {
         errors.push(this.t('validation.required', { key: 'VPC/Subnet' }, true));
       }
 
@@ -443,28 +371,29 @@ export default {
             />
           </div>
         </div>
+
+        <EC2Networking
+          :key="value.region"
+          v-model:enable-primary-ipv6="value.enablePrimaryIpv6"
+          v-model:ipv6-address-count="value.ipv6AddressCount"
+          v-model:ipv6-address-only="value.ipv6AddressOnly"
+          v-model:http-protocol-ipv6="value.httpProtocolIpv6"
+          v-model:vpc-id="value.vpcId"
+          v-model:subnet-id="value.subnetId"
+          :mode="mode"
+          :vpc-info="vpcInfo"
+          :subnet-info="subnetInfo"
+          :zone="value.zone"
+          :region="value.region"
+          :machine-pools="machinePools"
+          :has-ipv6="hasIpv6"
+          :disabled="disabled"
+          :is-new="poolCreateMode"
+          @update:has-ipv6="e=>$emit('update:hasIpv6', e)"
+          @validation-changed="e=>$emit('validationChanged',e)"
+        />
+
         <div class="row mt-20 mb-20">
-          <div class="col span-6">
-            <LabeledSelect
-              :mode="mode"
-              :value="selectedNetwork"
-              :options="networkOptions"
-              :searchable="true"
-              :required="true"
-              :disabled="disabled"
-              :placeholder="t('cluster.machineConfig.amazonEc2.selectedNetwork.placeholder')"
-              :label="t('cluster.machineConfig.amazonEc2.selectedNetwork.label')"
-              data-testid="amazonEc2__selectedNetwork"
-              option-key="value"
-              @update:value="updateNetwork($event)"
-            >
-              <template v-slot:option="opt">
-                <div :class="{'vpc': opt.kind === 'vpc', 'vpc-subnet': opt.kind !== 'vpc'}">
-                  <span class="vpc-name">{{ opt.label }}</span><span class="vpc-info">{{ opt.subLabel }}</span>
-                </div>
-              </template>
-            </LabeledSelect>
-          </div>
           <div class="col span-6">
             <LabeledInput
               v-model:value="value.iamInstanceProfile"
@@ -476,7 +405,6 @@ export default {
             />
           </div>
         </div>
-
         <portal :to="'advanced-'+uuid">
           <div class="row mt-20">
             <div class="col span-6">
@@ -658,24 +586,3 @@ export default {
     </template>
   </div>
 </template>
-<style scoped lang="scss">
-  .vpc, .vpc-subnet {
-    display: flex;
-    line-height: 30px;
-
-    .vpc-name {
-      font-weight: bold;
-      flex: 1;
-    }
-
-    .vpc-info {
-      font-size: 12px;
-      opacity: 0.7;
-    }
-  }
-
-  .vpc-subnet .vpc-name {
-    font-weight: normal;
-    padding-left: 15px;
-  }
-</style>

package/machine-config/azure.vue

@@ -35,7 +35,7 @@ const defaultConfig = {
   dns:                   '',
   environment:           'AzurePublicCloud',
   faultDomainCount:      '3',
-  image:                 'canonical:UbuntuServer:18.04-LTS:latest',
+  image:                 'canonical:ubuntu-24_04-lts:server-gen1:latest',
   location:              'westus',
   managedDisks:          false,
   noPublicIp:            false,