@rancher/shell 3.0.2-rc.6 → 3.0.3

package/components/nav/Type.vue

@@ -122,6 +122,7 @@ export default {
         :aria-label="type.labelKey ? t(type.labelKey) : (type.labelDisplay || type.label)"
         :href="href"
         class="type-link"
+        :aria-current="isActive ? 'page' : undefined"
         @click="selectType(); navigate($event);"
         @mouseenter="setNear(true)"
         @mouseleave="setNear(false)"

package/components/nav/__tests__/TopLevelMenu.test.ts

@@ -1,5 +1,4 @@
 import TopLevelMenu from '@shell/components/nav/TopLevelMenu.vue';
-import { SETTING } from '@shell/config/settings';
 import { mount, Wrapper } from '@vue/test-utils';
 import { CAPI, COUNT, MANAGEMENT } from '@shell/config/types';
 import { PINNED_CLUSTERS } from '@shell/store/prefs';
@@ -429,45 +428,6 @@ describe('topLevelMenu', () => {
     expect(description4.text()).toStrictEqual('some-description4');
   });
 
-  it('should not "crash" the component if the structure of banner settings is in an old format', async() => {
-    const wrapper: Wrapper<InstanceType<typeof TopLevelMenu>> = mount(TopLevelMenu, {
-      global: {
-        mocks: {
-          $route: {},
-          $store: {
-            ...generateStore(
-              [{ name: 'whatever' }],
-              [
-                // object based on https://github.com/rancher/dashboard/issues/10140#issuecomment-1883252402
-                {
-                  id:    SETTING.BANNERS,
-                  value: JSON.stringify({
-                    banner: {
-                      color:      '#78c9cf',
-                      background: '#27292e',
-                      text:       'Hello World!'
-                    },
-                    showHeader: 'true',
-                    showFooter: 'true'
-                  })
-                }
-              ]
-            ),
-          }
-        },
-
-        stubs: ['BrandImage', 'router-link'],
-      },
-    });
-
-    await waitForIt();
-
-    expect(wrapper.vm.sideMenuStyle).toStrictEqual({
-      marginBottom: '2em',
-      marginTop:    '2em'
-    });
-  });
-
   describe('searching a term', () => {
     describe('should displays a no results message if have clusters but', () => {
       it('given no matching clusters', async() => {

package/config/router/routes.js

@@ -23,6 +23,7 @@ const interopDefault = (promise) => promise.then((page) => page.default || page)
  */
 export default [
   {
+    name:      'root',
     path:      '/',
     component: () => interopDefault(import('@shell/pages/index.vue')),
     meta:      { requiresAuthentication: true },

package/core/plugin-routes.ts

@@ -22,123 +22,13 @@ export class PluginRoutes {
     });
   }
 
-  public addRoutes(plugin: any, newRouteInfos: RouteInfo[]) {
-    const allRoutes = [
-      ...(this.router.options.routes || [])
-    ];
-
-    // Need to take into account if routes are being replaced
-    // Despite what the docs say, routes are not replaced, so we use a workaround
-    // Remove all routes that are being replaced
-    const newRoutes = newRouteInfos.map((ri) => ri.route);
-
-    this.forEachNestedRoutes(newRoutes, (route: RouteRecordRaw) => {
-      // Patch colliding legacy routes that start /:product
-      if (route.path?.startsWith('/:product')) {
-        // Legacy pattern used by extensions - routes may collide, so modify them not to
-        let productName;
-
-        // If the route has a name (which is always the case for the extensions we have written), use it to get the product name
-        if (route.name && typeof route.name === 'string') {
-          const nameParts = route.name.split('-');
-
-          // First part of the route name is the product name
-          productName = nameParts[0];
-        }
-
-        // Use the plugin name as the product, if the route does not have a name
-        productName = productName || plugin.name;
-
-        // Replace the path - removing :product and using the actual product name instead - this avoids route collisions
-        route.path = `/${ productName }${ route.path.substr(9) }`;
-        route.meta = route.meta || {};
-
-        route.meta.product = route.meta.product || productName;
-      }
-    });
-
-    this.updateMatcher(newRouteInfos, allRoutes);
-  }
-
-  private updateMatcher(newRoutes: RouteInfo[], allRoutes: RouteRecordRaw[]) {
-    // Note - Always use a new router and replace the existing router's matching
-    // Using the existing router and adding routes to it will force nuxt middleware to
-    // execute many times (nuxt middleware boils down to route.beforeEach). This issue was seen refreshing in a harvester cluster with a
-    // dynamically loaded cluster
-
-    if (newRoutes.length === 0) {
-      return;
-    }
-
-    const orderedPluginRoutes: RouteRecordRaw[] = [];
-
-    // separate plugin routes that have parent and not, you want to push the new routes in REVERSE order to the front of the existing list so that the order of routes specified by the extension is preserved
-    newRoutes.reverse().forEach((routeInfo: RouteInfo) => {
-      let foundParentRoute;
-
+  public addRoutes(newRouteInfos: RouteInfo[]) {
+    newRouteInfos.forEach((routeInfo) => {
       if (routeInfo.parent) {
-        foundParentRoute = this.findInNestedRoutes(allRoutes, (route: RouteRecordRaw) => route.name === routeInfo.parent);
-
-        if (foundParentRoute) {
-          foundParentRoute.children = foundParentRoute?.children || [];
-          foundParentRoute.children.unshift(routeInfo.route);
-        }
-      }
-
-      if (!foundParentRoute) {
-        orderedPluginRoutes.unshift(routeInfo.route);
-      }
-    });
-
-    this.router.clearRoutes();
-
-    const allRoutesToAdd = [...orderedPluginRoutes, ...allRoutes];
-
-    allRoutesToAdd.forEach((route) => this.router.addRoute(route));
-  }
-
-  /**
-   * Traverse the entire tree of nested routes
-   *
-   * @param routes The routes we wish to traverse through
-   * @param fn -> Return true if you'd like to break the loop early (small)
-   * @returns {@boolean} -> Returns true if breaking early
-   */
-  private forEachNestedRoutes(
-    routes: RouteRecordRaw[] = [],
-    fn: (route: RouteRecordRaw) => boolean | undefined | void
-  ) {
-    for (let i = 0; i < routes.length; ++i) {
-      const route = routes[i];
-      const result = fn(route);
-
-      if (result || this.forEachNestedRoutes(route.children, fn)) {
-        return true;
-      }
-    }
-  }
-
-  /**
-   * Find a route that matches the criteria defined by fn.
-   *
-   * @param routes The routes we wish to search through
-   * @param fn -> Returns true if the passed in route matches the expected criteria
-   * @returns The found route or undefined
-   */
-  private findInNestedRoutes(
-    routes: RouteRecordRaw[] = [],
-    fn: (route: RouteRecordRaw) => boolean
-  ): RouteRecordRaw | undefined {
-    let found: RouteRecordRaw | undefined;
-
-    this.forEachNestedRoutes(routes, (route) => {
-      if (fn(route)) {
-        found = route;
-
-        return true;
+        this.router.addRoute(routeInfo.parent, routeInfo.route);
+      } else {
+        this.router.addRoute(routeInfo.route);
       }
     });
-
-    return found;
   }
 }

package/core/plugins.js

@@ -344,7 +344,7 @@ export default function(context, inject, vueApp) {
         });
 
         // Routes
-        pluginRoutes.addRoutes(plugin, plugin.routes);
+        pluginRoutes.addRoutes(plugin.routes);
 
         // Validators
         Object.keys(plugin.validators).forEach((key) => {

package/core/types.ts

@@ -471,6 +471,24 @@ export interface DSLReturnType {
    */
   virtualType: (options: ConfigureVirtualTypeOptions) => void;
 
+  /**
+   * Side menu ordering for grouping of pages
+   * @param input Name of the group
+   * @param weight Ordering to be applied for the specified group
+   * @param forBasic Apply to basic type instead of regular type tree
+   * @returns {@link void}
+   */
+  weightGroup: (input: string, weight: number, forBasic: boolean) => void;
+
+  /**
+   * Side menu ordering for simple pages
+   * @param input Name of the page/resource
+   * @param weight Ordering to be applied for the specified page/resource
+   * @param forBasic Apply to basic type instead of regular type tree
+   * @returns {@link void}
+   */
+  weightType: (input: string, weight: number, forBasic: boolean) => void;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
@@ -484,8 +502,6 @@ export interface DSLReturnType {
   // moveType: (match, group)
   // setGroupDefaultType: (input, defaultType)
   // spoofedType: (obj)
-  // weightGroup: (input, weight, forBasic)
-  // weightType: (input, weight, forBasic)
 }
 
 /**

package/detail/__tests__/autoscaling.horizontalpodautoscaler.test.ts

@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils';
+import camelCase from 'lodash/camelCase';
 import HorizontalPodAutoScaler from '@shell/detail/autoscaling.horizontalpodautoscaler/index.vue';
 
 describe('view: autoscaling.horizontalpodautoscaler', () => {
@@ -43,7 +44,7 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
 
   };
 
-  const value = {
+  const valueWithResourceMetrics = {
     status: {
       currentMetrics: [
         {
@@ -100,36 +101,96 @@ describe('view: autoscaling.horizontalpodautoscaler', () => {
       }
     }
   };
+  const valueWithOtherMetrics = {
+    status: {
+      currentMetrics: [
 
-  const metricsValue = Object.values(value.spec.metrics);
-  const currentMetrics = Object.values(value.status.currentMetrics);
+        {
+          external: {
+            metric:  { name: 's1-prometheus' },
+            current: { averageValue: 50 }
+          },
+          type: 'External'
 
-  const wrapper = mount(HorizontalPodAutoScaler, {
-    props:  { value },
-    global: { mocks, stubs },
-  });
+        }
+      ],
+    },
+    spec: {
+      metrics: [
+        {
+          external: {
+            metric: { name: 's1-prometheus' },
+            target: { averageValue: 50, type: 'AverageValue' }
+          },
+          type: 'External'
+        }
+      ]
+    }
+  }
+;
 
-  describe.each(value.spec.metrics)('should display metrics for each resource:', (metric) => {
-    const name = metric.resource.name;
+  describe('with resource metrics:', () => {
+    const metricsValue = Object.values(valueWithResourceMetrics.spec.metrics);
+    const currentMetrics = Object.values(valueWithResourceMetrics.status.currentMetrics);
 
-    it(`${ name }:`, () => {
-      // Resource metrics
-      const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
-      const resourceName = wrapper.get(`[data-testid="resource-metrics-name-${ name }"]`);
-      const metricValue = metricsValue.find((f) => f.resource.name === name)?.resource;
+    const wrapper = mount(HorizontalPodAutoScaler, {
+      props:  { value: valueWithResourceMetrics },
+      global: { mocks, stubs },
+    });
 
-      // Current Metrics
-      const averageUtilization = wrapper.get(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
-      const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
-      const currentResource = currentMetrics.find((f) => f.resource.name === name)?.resource.current;
+    describe.each(valueWithResourceMetrics.spec.metrics)('should display metrics for each resource:', (metric) => {
+      const name = metric.resource.name;
 
+      it(`${ name }:`, () => {
       // Resource metrics
-      expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageUtilization }`);
-      expect(resourceName.element.textContent).toBe(`${ metricValue?.name }`);
+        const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
+        const resourceName = wrapper.get(`[data-testid="resource-metrics-name-${ name }"]`);
+        const metricValue = metricsValue.find((f) => f.resource.name === name)?.resource;
+
+        // Current Metrics
+        const averageUtilization = wrapper.get(`[data-testid="current-metrics-Average Utilization-${ name }"]`);
+        const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
+        const currentResource = currentMetrics.find((f) => f.resource.name === name)?.resource.current;
+
+        // Resource metrics
+        expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageUtilization }`);
+        expect(resourceName.element.textContent).toBe(`${ metricValue?.name }`);
+
+        // Current Metrics
+        expect(averageUtilization.element.textContent).toBe(`${ currentResource?.averageUtilization }`);
+        expect(averageValue.element.textContent).toBe(`${ currentResource?.averageValue }`);
+      });
+    });
+  });
+
+  describe('with other metrics:', () => {
+    const currentMetrics = Object.values(valueWithOtherMetrics.status.currentMetrics);
+
+    const wrapper = mount(HorizontalPodAutoScaler, {
+      props:  { value: valueWithOtherMetrics },
+      global: { mocks, stubs },
+    });
+
+    describe.each(valueWithOtherMetrics.spec.metrics)('should display metrics for each resource:', (metric) => {
+      const metricType = camelCase(metric.type);
+      const name = metric[metricType as keyof typeof metric].metric.name;
+
+      it(`${ name }:`, () => {
+        // Resource metrics
+        const resourceValue = wrapper.get(`[data-testid="resource-metrics-value-${ name }"]`);
+        const metricValue = metric[metricType as keyof typeof metric];
+
+        // Current Metrics
+        const averageValue = wrapper.get(`[data-testid="current-metrics-Average Value-${ name }"]`);
+        const currentMatch = currentMetrics.find((f) => f[metricType as keyof typeof metric]?.metric.name === name);
+        const currentValue = currentMatch[metricType as keyof typeof metric]?.current;
+
+        // Resource metrics
+        expect(resourceValue.element.textContent).toBe(`${ metricValue?.target?.averageValue }`);
 
-      // Current Metrics
-      expect(averageUtilization.element.textContent).toBe(`${ currentResource?.averageUtilization }`);
-      expect(averageValue.element.textContent).toBe(`${ currentResource?.averageValue }`);
+        // Current Metrics
+        expect(averageValue.element.textContent).toBe(`${ currentValue?.averageValue }`);
+      });
     });
   });
 });

package/detail/autoscaling.horizontalpodautoscaler/index.vue

@@ -43,11 +43,21 @@ export default {
       } = this.value;
 
       return metrics.map((metric) => {
+        const currentMetricsKVs = [];
+        let currentMatch;
+        const metricType = camelCase(metric.type);
         const metricValue = get(metric, camelCase(metric.type));
         const targetType = metricValue?.target?.type;
-        const currentMatch = findBy(currentMetrics, 'resource.name', metric.resource.name);
+
+        // The format is different between 'Resource' metrics and others.
+        // See for examples: https://kubernetes.io/docs/tasks/run-application/horizontal-pod-autoscale-walkthrough/#appendix-horizontal-pod-autoscaler-status-conditions
+        if (metricType !== 'resource') {
+          currentMatch = findBy(currentMetrics, `${ metricType }.metric.name`, metricValue.metric.name);
+        } else {
+          currentMatch = findBy(currentMetrics, 'resource.name', metric.resource.name);
+        }
+
         const current = currentMatch ? get(currentMatch, `${ camelCase(metric.type) }.current`) : null;
-        const currentMetricsKVs = [];
 
         if (current) {
           keys(current).forEach((k) => {
@@ -67,7 +77,7 @@ export default {
             objectApiVersion: metricValue?.describedObject?.apiVersion ?? null,
             objectKind:       metricValue?.describedObject?.kind ?? null,
             objectName:       metricValue?.describedObject?.name ?? null,
-            resourceName:     metricValue?.name ?? null,
+            resourceName:     metricValue?.name || metricValue?.metric?.name || null,
             currentMetrics:   currentMetricsKVs,
           },
         };

package/edit/auth/__tests__/oidc.test.ts

@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 /* eslint-disable jest/no-hooks */
-import { mount } from '@vue/test-utils';
+import { mount, type VueWrapper } from '@vue/test-utils';
 import { _EDIT } from '@shell/config/query-params';
 
 import oidc from '@shell/edit/auth/oidc.vue';
@@ -32,7 +32,7 @@ const mockModel = {
 };
 
 describe('oidc.vue', () => {
-  let wrapper: any;
+  let wrapper: VueWrapper<any, any>;
   const requiredSetup = () => ({
     data() {
       return {
@@ -44,7 +44,7 @@ describe('oidc.vue', () => {
         originalModel:  null,
         principals:     [],
         authConfigName: 'oidc',
-      };
+      } as any; // any is necessary as in pre-existing tests we are including inherited mixins values
     },
     global: {
       mocks: {
@@ -148,4 +148,35 @@ describe('oidc.vue', () => {
     expect(groupSearchCheckbox.isVisible()).toBe(true);
     expect(wrapper.vm.model.groupSearchEnabled).toBe(true);
   });
+
+  it('changing URL should update issuer and auth-endpoint if Keycloak', async() => {
+    wrapper.vm.model.id = 'keycloakoidc';
+    const newUrl = 'whatever';
+
+    await wrapper.find(`[data-testid="oidc-url"]`).setValue(newUrl);
+    await wrapper.vm.$nextTick();
+
+    const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+    const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+
+    expect(issuer).toBe(`${ newUrl }/realms/`);
+    expect(endpoint).toBe(`${ newUrl }/realms//protocol/openid-connect/auth`);
+  });
+
+  it('changing realm should update issuer and auth-endpoint if Keycloak', async() => {
+    const newRealm = 'newRealm';
+    const oldUrl = 'oldUrl';
+
+    wrapper.vm.model.id = 'keycloakoidc';
+    wrapper.vm.oidcUrls.url = oldUrl;
+
+    await wrapper.find(`[data-testid="oidc-realm"]`).setValue(newRealm);
+    await wrapper.vm.$nextTick();
+
+    const issuer = (wrapper.find('[data-testid="oidc-issuer"]').element as HTMLInputElement).value;
+    const endpoint = (wrapper.find('[data-testid="oidc-auth-endpoint"]').element as HTMLInputElement).value;
+
+    expect(issuer).toBe(`${ oldUrl }/realms/${ newRealm }`);
+    expect(endpoint).toBe(`${ oldUrl }/realms/${ newRealm }/protocol/openid-connect/auth`);
+  });
 });

package/edit/auth/ldap/__tests__/config.test.ts

@@ -2,20 +2,6 @@ import { mount } from '@vue/test-utils';
 import LDAPConfig from '@shell/edit/auth/ldap/config.vue';
 
 describe('lDAP config', () => {
-  it.each([
-    'openldap', 'freeipa'
-  ])('should display searchUsingServiceAccount checkbox if type %p', (type) => {
-    const wrapper = mount(LDAPConfig, {
-      propsData: {
-        value: {},
-        type,
-      }
-    });
-    const checkbox = wrapper.find('[data-testid="searchUsingServiceAccount"]');
-
-    expect(checkbox).toBeDefined();
-  });
-
   it('updates user login filter when value is entered', async() => {
     const wrapper = mount(
       LDAPConfig,

package/edit/auth/ldap/config.vue

@@ -11,8 +11,6 @@ const DEFAULT_TLS_PORT = 636;
 
 export const SHIBBOLETH = 'shibboleth';
 export const OKTA = 'okta';
-export const OPEN_LDAP = 'openldap';
-export const FREE_IPA = 'freeipa';
 
 export default {
   emits: ['update:value'],
@@ -66,11 +64,6 @@ export default {
     // Does the auth provider support LDAP for search in addition to SAML?
     isSamlProvider() {
       return this.type === SHIBBOLETH || this.type === OKTA;
-    },
-
-    // Allow to enable user search just for these providers
-    isSearchAllowed() {
-      return this.type === OPEN_LDAP || this.type === FREE_IPA;
     }
   },
 
@@ -233,23 +226,6 @@ export default {
         />
       </div>
     </div>
-
-    <div
-      v-if="isSearchAllowed"
-      class="row mb-20"
-    >
-      <div class="col">
-        <Checkbox
-          v-model:value="model.searchUsingServiceAccount"
-          :mode="mode"
-          data-testid="searchUsingServiceAccount"
-          class="full-height"
-          :label="t('authConfig.ldap.searchUsingServiceAccount.label')"
-          :tooltip="t('authConfig.ldap.searchUsingServiceAccount.tip')"
-        />
-      </div>
-    </div>
-
     <div class="row mb-20">
       <div class="col span-6">
         <LabeledInput

package/edit/auth/oidc.vue

@@ -136,7 +136,7 @@ export default {
       const isKeycloak = this.model.id === 'keycloakoidc';
 
       const url = this.oidcUrls.url.replaceAll(' ', '');
-      const realmsPath = isKeycloak ? 'auth/realms' : 'realms';
+      const realmsPath = 'realms';
 
       this.model.issuer = `${ url }/${ realmsPath }/${ this.oidcUrls.realm || '' }`;
 

package/edit/autoscaling.horizontalpodautoscaler/metric-identifier.vue

@@ -65,14 +65,17 @@ export default {
     </div>
     <div class="row">
       <div class="col span-12">
-        <h3>Metric Selector</h3>
         <MatchExpressions
           :mode="mode"
           :value="matchExpressions"
           :label="t('hpa.metricIdentifier.selector.label')"
           :show-remove="false"
           @input="matchChanged($event)"
-        />
+        >
+          <template #header>
+            <h3>{{ t('hpa.metricIdentifier.selector.header') }}</h3>
+          </template>
+        </MatchExpressions>
       </div>
     </div>
   </div>

package/edit/fleet.cattle.io.clustergroup.vue

@@ -149,14 +149,16 @@ export default {
       :namespace-type="FLEET_WORKSPACE"
       @update:value="$emit('input', $event)"
     />
-
-    <h2 v-t="'fleet.clusterGroup.selector.label'" />
     <MatchExpressions
       :mode="mode"
       :value="expressions"
       :show-remove="false"
       @update:value="matchChanged($event)"
-    />
+    >
+      <template #header>
+        <h2 v-t="'fleet.clusterGroup.selector.label'" />
+      </template>
+    </MatchExpressions>
     <Banner
       v-if="matchingClusters"
       :color="(matchingClusters.isNone || matchingClusters.isAll ? 'warning' : 'success')"

package/edit/fleet.cattle.io.gitrepo.vue

@@ -103,6 +103,7 @@ export default {
     if (!pollingInterval) {
       if (this.realMode === _CREATE) {
         pollingInterval = DEFAULT_POLLING_INTERVAL;
+        this.value.spec.pollingInterval = this.durationSeconds(pollingInterval);
       } else if (this.realMode === _EDIT || this.realMode === _VIEW) {
         pollingInterval = MINIMUM_POLLING_INTERVAL;
       }

package/edit/logging-flow/Match.vue

@@ -124,7 +124,7 @@ export default {
         <div class="row">
           <div class="col span-12">
             <Select
-              v-model="value.namespaces"
+              v-model:value="value.namespaces"
               class="lg"
               :options="namespaces"
               :placeholder="t('logging.flow.matches.namespaces.placeholder')"

package/edit/provisioning.cattle.io.cluster/__tests__/Advanced.test.ts

@@ -45,8 +45,6 @@ describe('component: Advanced', () => {
         mountOptions
       );
 
-      // eslint-disable-next-line no-console
-      console.log(wrapper.html());
       const inputElem = wrapper.find('[data-testid="array-list-box0"]');
 
       expect(inputElem.exists()).toBe(false);

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

@@ -1701,7 +1701,7 @@ export default {
       const defaultChartValue = this.versionInfo[name];
       const key = this.chartVersionKey(name);
 
-      return mergeWithReplaceArrays(defaultChartValue?.values, this.userChartValues[key]);
+      return merge({}, defaultChartValue?.values || {}, this.userChartValues[key] || {});
     },
 
     initServerAgentArgs() {

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

@@ -119,14 +119,17 @@ export default {
       >
         <template #default="{row, i}">
           <template v-if="row.value.machineLabelSelector">
-            <h3>{{ t('cluster.advanced.argInfo.machineSelector.title') }}</h3>
             <MatchExpressions
               v-model:value="row.value.machineLabelSelector"
               class="mb-20"
               :mode="mode"
               :show-remove="false"
               :initial-empty-row="true"
-            />
+            >
+              <template #header>
+                <h3>{{ t('cluster.advanced.argInfo.machineSelector.title') }}</h3>
+              </template>
+            </MatchExpressions>
             <h3>{{ t('cluster.advanced.argInfo.machineSelector.subTitle') }}</h3>
           </template>
           <h3 v-else>

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

@@ -48,7 +48,7 @@ export default {
       return this.value.spec.rkeConfig.etcd;
     },
     argsEtcdExposeMetrics() {
-      return !!this.selectedVersion?.serverArgs['etcd-expose-metrics'];
+      return !!this.selectedVersion?.serverArgs?.['etcd-expose-metrics'];
     },
     configEtcdExposeMetrics() {
       return !!this.value.spec.rkeConfig.machineGlobalConfig['etcd-expose-metrics'];