@rancher/shell 3.0.12-rc.5 → 3.0.12-rc.6

package/machine-config/__tests__/generic.test.ts

@@ -0,0 +1,163 @@
+import Generic from '@shell/machine-config/generic.vue';
+import { shallowMount } from '@vue/test-utils';
+import { MANAGEMENT } from '@shell/config/types';
+import { NODE_DRIVER_FIELD_HINTS } from '@shell/config/labels-annotations';
+import { Banner } from '@components/Banner';
+import Questions from '@shell/components/Questions';
+
+const PROVIDER = 'testdriver';
+
+const buildFields = () => ({
+  zone:       { type: 'string' },
+  diskSize:   { type: 'string' },
+  enginePort: { type: 'string' },
+});
+
+const mockedStore = (fieldHints: Record<string, { type: string }> | null = null) => {
+  const driver = { metadata: { annotations: { ...(fieldHints ? { [NODE_DRIVER_FIELD_HINTS]: JSON.stringify(fieldHints) } : {}) } } };
+
+  return {
+    getters: {
+      'i18n/t':                           (key: string) => key,
+      t:                                  (key: string) => key,
+      'plugins/fieldsForDriver':          () => Promise.resolve(buildFields()),
+      'plugins/credentialFieldForDriver': () => PROVIDER,
+      'plugins/fieldNamesForDriver':      () => [],
+      'rancher/schemaFor':                () => null,
+    },
+    dispatch: jest.fn((_action: string, args: any) => {
+      if (args?.type === MANAGEMENT.NODE_DRIVER && args?.id === PROVIDER) {
+        return Promise.resolve(driver);
+      }
+
+      return Promise.resolve(null);
+    }),
+  };
+};
+
+const mountAndFetch = async(storeOverrides: Record<string, any> = {}) => {
+  const store = {
+    ...mockedStore(null),
+    ...storeOverrides,
+    getters: {
+      ...mockedStore(null).getters,
+      ...(storeOverrides.getters || {}),
+    },
+  };
+
+  if (storeOverrides.dispatch) {
+    store.dispatch = storeOverrides.dispatch;
+  }
+
+  const wrapper = shallowMount(Generic, {
+    props: {
+      credentialId: 'cattle-global-data:cc-12345',
+      provider:     PROVIDER,
+      value:        { metadata: { namespace: 'fleet-default' } },
+      mode:         'edit',
+    },
+    global: {
+      mocks: {
+        $store:      store,
+        $fetchState: { pending: false },
+      },
+    },
+  });
+
+  await (Generic as any).fetch.call(wrapper.vm);
+  await wrapper.vm.$nextTick();
+
+  return wrapper;
+};
+
+describe('generic machine config', () => {
+  describe('io.cattle.nodedriver/ui-field-hints annotation', () => {
+    it('should override field types when type hints are provided', async() => {
+      const hints = {
+        zone:     { type: 'multiline' },
+        diskSize: { type: 'multiline' },
+      };
+      const wrapper = await mountAndFetch({
+        ...mockedStore(hints),
+        getters: { ...mockedStore(hints).getters },
+      });
+
+      expect((wrapper.vm as any).fields.zone.type).toBe('multiline');
+      expect((wrapper.vm as any).fields.diskSize.type).toBe('multiline');
+    });
+
+    it('should not modify fields that are not in the hints', async() => {
+      const hints = { zone: { type: 'multiline' } };
+      const wrapper = await mountAndFetch({
+        ...mockedStore(hints),
+        getters: { ...mockedStore(hints).getters },
+      });
+
+      expect((wrapper.vm as any).fields.enginePort.type).toBe('string');
+    });
+
+    it('should not modify fields when no hints annotation exists', async() => {
+      const wrapper = await mountAndFetch();
+
+      expect((wrapper.vm as any).fields.zone.type).toBe('string');
+      expect((wrapper.vm as any).fields.diskSize.type).toBe('string');
+      expect((wrapper.vm as any).fields.enginePort.type).toBe('string');
+    });
+
+    it('should ignore hint entries for fields not present in the schema', async() => {
+      const hints = { nonExistentField: { type: 'multiline' } };
+      const wrapper = await mountAndFetch({
+        ...mockedStore(hints),
+        getters: { ...mockedStore(hints).getters },
+      });
+
+      expect((wrapper.vm as any).fields.zone.type).toBe('string');
+      expect((wrapper.vm as any).fields.nonExistentField).toBeUndefined();
+    });
+
+    it('should ignore hint entries that do not specify a type', async() => {
+      const hints = { zone: { otherKey: 'blah' } } as any;
+      const wrapper = await mountAndFetch({
+        ...mockedStore(hints),
+        getters: { ...mockedStore(hints).getters },
+      });
+
+      expect((wrapper.vm as any).fields.zone.type).toBe('string');
+    });
+
+    it('should handle malformed JSON in the annotation gracefully', async() => {
+      const driver = { metadata: { annotations: { [NODE_DRIVER_FIELD_HINTS]: 'testing bad json{' } } };
+      const wrapper = await mountAndFetch({ dispatch: jest.fn(() => Promise.resolve(driver)) });
+
+      expect((wrapper.vm as any).fields.zone.type).toBe('string');
+      expect((wrapper.vm as any).errors.length).toBe(1);
+    });
+  });
+
+  describe('data fetching failures', () => {
+    it('should render an error banner and not render Questions when unable to determine fields for the driver', async() => {
+      const wrapper = await mountAndFetch({ getters: { 'plugins/fieldsForDriver': () => Promise.resolve(null) } });
+
+      expect((wrapper.vm as any).errors.length).toBe(1);
+      expect((wrapper.vm as any).errors[0].message).toContain(`Machine Driver config schema not found for rke-machine-config.cattle.io.${ PROVIDER }config`);
+
+      const banners = wrapper.findAllComponents(Banner);
+
+      expect(banners.length).toBe(1);
+      expect(wrapper.findComponent(Questions).exists()).toBe(false);
+    });
+
+    it('should render an error banner but still render Questions when unable to retrieve node driver field hints', async() => {
+      const driverError = 'node driver not found';
+      const wrapper = await mountAndFetch({ dispatch: jest.fn(() => Promise.reject(new Error(driverError))) });
+
+      expect((wrapper.vm as any).errors.length).toBe(1);
+      expect((wrapper.vm as any).errors[0].message).toContain(driverError);
+
+      const banners = wrapper.findAllComponents(Banner);
+
+      expect(banners.length).toBe(1);
+      expect(wrapper.findComponent(Questions).exists()).toBe(true);
+    });
+  });
+});

package/machine-config/components/EC2Networking.vue

@@ -10,6 +10,7 @@ import { Banner } from '@components/Banner';
 import { scrollToBottom } from '@shell/utils/scroll';
 import { _CREATE } from '@shell/config/query-params';
 import { getSubnetDisplayName, getVpcDisplayName, isIpv4Network, isIpv6Network } from '@shell/utils/aws';
+import { STACK_PREFS } from '@shell/edit/provisioning.cattle.io.cluster/tabs/networking/index.vue';
 
 export default {
   name: 'Ec2MachinePoolNetworking',
@@ -297,10 +298,27 @@ export default {
       return this.mode === _CREATE || (this.isNew && this.somePoolisIpv6OrDual) || this.enableIpv6;
     },
 
-    poolsInvalid() {
-      const somePoolHasIpv4 = !!this.machinePools.find((p) => !p.isIpv6 && !p.isDualStack);
+    dualStackModeInvalid() {
+      const poolNetworkModes = new Set(this.machinePools.map((p) => {
+        if (p.isDualStack || p.isIpv6) {
+          return STACK_PREFS.DUAL;
+        }
+
+        return STACK_PREFS.IPV4;
+      }));
 
-      return this.somePoolisIpv6OrDual && somePoolHasIpv4;
+      return poolNetworkModes.size > 1;
+    },
+    ipv6ModeInvalid() {
+      const poolNetworkModes = new Set(this.machinePools.map((p) => {
+        if (p.isIpv6) {
+          return STACK_PREFS.IPV6;
+        }
+
+        return 'other';
+      }));
+
+      return poolNetworkModes.size > 1;
     },
 
     addressCountInvalid() {
@@ -308,7 +326,7 @@ export default {
     },
 
     allValid() {
-      return !this.poolsInvalid && !this.addressCountInvalid;
+      return !this.dualStackModeInvalid && !this.addressCountInvalid && !this.ipv6ModeInvalid;
     }
   },
 
@@ -356,10 +374,10 @@ export default {
 
 <template>
   <Banner
-    v-if="poolsInvalid"
+    v-if="dualStackModeInvalid"
     color="error"
-    :label="t('cluster.machineConfig.amazonEc2.ipv6ValidationWarning')"
-    data-testid="amazonEc2__ipv6Warning"
+    :label="t('cluster.machineConfig.amazonEc2.dualStackValidationWarning')"
+    data-testid="amazonEc2__dualStackWarning"
   />
   <div
     v-if="showIpv6Options"
@@ -410,6 +428,12 @@ export default {
       </LabeledSelect>
     </div>
   </div>
+  <Banner
+    v-if="enableIpv6 && ipv6ModeInvalid"
+    color="error"
+    :label="t('cluster.machineConfig.amazonEc2.ipv6ValidationWarning')"
+    data-testid="amazonEc2__ipv6Warning"
+  />
   <div
     v-if="enableIpv6"
     class="row mb-10 ipv6-row"

package/machine-config/components/__tests__/EC2Networking.test.ts

@@ -1,4 +1,4 @@
-import { mount, shallowMount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import EC2Networking from '@shell/machine-config/components/EC2Networking.vue';
 
 import { vpcInfo, subnetInfo } from './utils/vpcSubnetMockData';
@@ -16,6 +16,7 @@ describe('component: EC2Networking', () => {
     },
     global: {
       mocks: {
+        t:           (key: string) => key,
         $fetchState: { pending: false },
         $store:      { getters: defaultGetters },
       },
@@ -65,16 +66,9 @@ describe('component: EC2Networking', () => {
   });
 
   it('should render the ipv6 only checkbox when the selected network is dual-stack', async() => {
-    const wrapper = mount(EC2Networking, defaultCreateSetup);
-    const ipv6Checkbox = wrapper.findComponent('[data-testid="amazonEc2__enableIpv6"]');
-
-    ipv6Checkbox.vm.$emit('update:value', true);
-    await wrapper.vm.$nextTick();
-
-    const networkDropdown = wrapper.findComponent('[data-testid="amazonEc2__selectedNetwork"]');
+    const wrapper = shallowMount(EC2Networking, defaultCreateSetup);
 
-    networkDropdown.vm.$emit('selecting', 'subnet-321');
-    await wrapper.vm.$nextTick();
+    await wrapper.setData({ enableIpv6: true, selectedNetwork: 'vpc-12345' });
 
     const ipv6OnlyCheckbox = wrapper.findComponent('[data-testid="amazonEc2__ipv6AddressOnly"]');
 
@@ -82,14 +76,19 @@ describe('component: EC2Networking', () => {
   });
 
   it.each([
-    [[{ isIpv6: true }, { isIpv6: false }], true],
-    [[{ isIpv6: false }, { isIpv6: false }], false],
-    [[{ isIpv6: true }, { isIpv6: true }], false],
-  ])('should show an error banner if pools do not either all have ipv6 or all have ipv4', (pools, shouldShowError) => {
+    [[{ isIpv6: true }, { isIpv6: false }], true, true],
+    [[{ isIpv6: false, isDualStack: true }, { isIpv6: false, isDualStack: false }], true, false],
+    [[{ isIpv6: true, isDualStack: false }, { isIpv6: false, isDualStack: true }], false, true],
+    [[{ isIpv6: false, isDualStack: false }, { isIpv6: false, isDualStack: false }], false, false],
+    [[{ isIpv6: true, isDualStack: false }, { isIpv6: true, isDualStack: false }], false, false],
+    [[{ isIpv6: false, isDualStack: true }, { isIpv6: false, isDualStack: true }], false, false],
+  ])('should show the correct warning banner based on mixed machine pool network modes', (pools, shouldShowDualStackWarning, shouldShowIpv6Warning) => {
     const wrapper = shallowMount(EC2Networking, { ...defaultCreateSetup, propsData: { ...defaultCreateSetup.propsData, machinePools: pools } });
+    const dualStackWarning = wrapper.findComponent('[data-testid="amazonEc2__dualStackWarning"]');
     const ipv6Warning = wrapper.findComponent('[data-testid="amazonEc2__ipv6Warning"]');
 
-    expect(ipv6Warning.exists()).toBe(shouldShowError);
+    expect(dualStackWarning.exists()).toBe(shouldShowDualStackWarning);
+    expect(ipv6Warning.exists()).toBe(shouldShowIpv6Warning);
   });
 
   it('should show ipv6 inputs and automatically check the enable ipv6 checkbox when adding a new pool if some other pool in the cluster is using ipv6 or dual stack', () => {
@@ -145,4 +144,28 @@ describe('component: EC2Networking', () => {
 
     expect(wrapper.emitted('validationChanged')?.[0][0]).toBe(true);
   });
+
+  it('should emit a validationChanged: false event when ipv6-only and dual-stack pools are mixed', async() => {
+    const wrapper = shallowMount(EC2Networking, {
+      ...defaultCreateSetup,
+      propsData: {
+        ...defaultCreateSetup.propsData,
+        machinePools: [{ isIpv6: true, isDualStack: false }, { isIpv6: false, isDualStack: true }],
+      },
+    });
+
+    expect(wrapper.emitted('validationChanged')?.[0][0]).toBe(false);
+  });
+
+  it('should emit a validationChanged: true event when all pools are dual-stack', async() => {
+    const wrapper = shallowMount(EC2Networking, {
+      ...defaultCreateSetup,
+      propsData: {
+        ...defaultCreateSetup.propsData,
+        machinePools: [{ isIpv6: false, isDualStack: true }, { isIpv6: false, isDualStack: true }],
+      },
+    });
+
+    expect(wrapper.emitted('validationChanged')?.[0][0]).toBe(true);
+  });
 });

package/machine-config/generic.vue

@@ -4,6 +4,10 @@ import { Banner } from '@components/Banner';
 import CreateEditView from '@shell/mixins/create-edit-view';
 import { exceptionToErrorsArray, stringify } from '@shell/utils/error';
 import Questions from '@shell/components/Questions';
+import { MANAGEMENT } from '@shell/config/types';
+import { NODE_DRIVER_FIELD_HINTS } from '@shell/config/labels-annotations';
+import { isEmpty } from '@shell/utils/object';
+import cloneDeep from 'lodash/cloneDeep';
 
 export default {
   emits: ['input'],
@@ -35,12 +39,36 @@ export default {
     this.errors = [];
 
     try {
-      this.fields = await this.$store.getters['plugins/fieldsForDriver'](this.provider);
+      const fields = await this.$store.getters['plugins/fieldsForDriver'](this.provider);
+
+      // copy the result of the getter before modifying it to add hints
+      this.fields = cloneDeep(fields);
       const name = `rke-machine-config.cattle.io.${ this.provider }config`;
 
       if ( !this.fields ) {
         throw new Error(`Machine Driver config schema not found for ${ name }`);
       }
+    } catch (e) {
+      this.errors = exceptionToErrorsArray(e);
+
+      return;
+    }
+
+    try {
+      const driver = await this.$store.dispatch('management/find', { type: MANAGEMENT.NODE_DRIVER, id: this.provider } );
+      const fieldHints = driver?.metadata?.annotations?.[NODE_DRIVER_FIELD_HINTS];
+      let parsedHints;
+
+      if (fieldHints) {
+        parsedHints = JSON.parse(fieldHints);
+      }
+      if (parsedHints && !isEmpty(parsedHints)) {
+        Object.keys(this.fields).forEach((fieldKey) => {
+          if (parsedHints[fieldKey] && parsedHints[fieldKey].type) {
+            this.fields[fieldKey].type = parsedHints[fieldKey].type;
+          }
+        });
+      }
     } catch (e) {
       this.errors = exceptionToErrorsArray(e);
     }
@@ -77,7 +105,7 @@ export default {
     v-if="$fetchState.pending"
     :delayed="true"
   />
-  <div v-else-if="errors.length">
+  <template v-else>
     <div
       v-for="(err, idx) in errors"
       :key="idx"
@@ -87,9 +115,8 @@ export default {
         :label="stringify(err)"
       />
     </div>
-  </div>
-  <div v-else>
     <Questions
+      v-if="fields"
       :value="value"
       :mode="mode"
       :tabbed="false"
@@ -99,5 +126,5 @@ export default {
       :disabled="disabled"
       @update:value="$emit('input', $event)"
     />
-  </div>
+  </template>
 </template>

package/mixins/resource-fetch.js

@@ -35,7 +35,7 @@ export default {
     // Normally owner components supply `resource` and `inStore` as part of their data, however these are needed here before parent data runs
     // So set up both here
     const params = { ...this.$route.params };
-    const resource = params.resource || this.schema?.id; // Resource can either be on a page showing single list, or a page of a resource showing a list of another resource
+    const resource = this.schema?.id || params.resource; // Resource can either be on a page showing single list, or a page of a resource showing a list of another resource
     const inStore = this.$store.getters['currentStore'](resource);
 
     return {

package/models/__tests__/rke-machine.cattle.io.vmwarevspheremachinetemplate.test.ts

@@ -0,0 +1,22 @@
+import VmwarevsphereMachineTemplate from '@shell/models/rke-machine.cattle.io.vmwarevspheremachinetemplate';
+
+describe('class VmwarevsphereMachineTemplate', () => {
+  describe('providerLocation', () => {
+    it.each([
+      ['/DC1/host/ClusterA/Resources', 'ClusterA'],
+      ['/DC1/host/ClusterA/Resources/PoolX', 'ClusterA'],
+      ['/DC1/host/ClusterA/Resources/', 'ClusterA'],
+      ['/DC1/host/esxi01/Resources', 'esxi01'],
+      ['/DC1/vm/FolderA', null],
+      ['/DC1/host/foo/ResourcesPool/bar', null],
+      ['/DC1/host//Resources/PoolX', null],
+      ['', null],
+      [null, null],
+      [undefined, null],
+    ])('returns %p for pool %p', (pool: string | null | undefined, expected: string | null) => {
+      const machineTemplate = new VmwarevsphereMachineTemplate({ spec: { template: { spec: { pool } } } });
+
+      expect(machineTemplate.providerLocation).toStrictEqual(expected);
+    });
+  });
+});

package/models/pod.js

@@ -309,19 +309,21 @@ export default class Pod extends WorkloadService {
   save() {
     const prev = { ...this };
 
-    const { metadata, spec } = this.spec.template;
+    if (this.spec?.template) {
+      const { metadata, spec } = this.spec.template;
 
-    this.spec = {
-      ...this.spec,
-      ...spec
-    };
+      this.spec = {
+        ...this.spec,
+        ...spec
+      };
 
-    this.metadata = {
-      ...this.metadata,
-      ...metadata
-    };
+      this.metadata = {
+        ...this.metadata,
+        ...metadata
+      };
 
-    delete this.spec.template;
+      delete this.spec.template;
+    }
 
     // IF there is an error POD world model get overwritten
     // For the workloads this need be reset back

package/models/rke-machine.cattle.io.vmwarevspheremachinetemplate.js

@@ -1,11 +1,20 @@
 import { formatSi } from '@shell/utils/units';
 import MachineTemplate from './rke-machine.cattle.io.machinetemplate';
 
+const POOL_LOCATION_MATCHER = /\/host\/([^/]+)\/Resources(?:\/|$)/;
+
 export default class VmwarevsphereMachineTemplate extends MachineTemplate {
   get provider() {
     return 'vmwarevsphere';
   }
 
+  get providerLocation() {
+    const pool = this.spec?.template?.spec?.pool;
+    const match = pool?.match(POOL_LOCATION_MATCHER);
+
+    return match?.[1] || null;
+  }
+
   get providerSize() {
     const size = formatSi(this.spec.template.spec.memorySize * 1048576, 1024, 'iB');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rancher/shell",
-  "version": "3.0.12-rc.5",
+  "version": "3.0.12-rc.6",
   "description": "Rancher Dashboard Shell",
   "repository": "https://github.com/rancher/dashboard",
   "license": "Apache-2.0",

package/pages/auth/login.vue

@@ -177,7 +177,7 @@ export default {
     this.vendor = getVendor();
     this.providers = providers;
     this.hasLocal = hasLocal;
-    this.showLocal = !hasOthers || (this.$route.query[LOCAL] === _FLAGGED);
+    this.showLocal = hasLocal && (!hasOthers || (this.$route.query[LOCAL] === _FLAGGED));
     this.customLoginError = JSON.parse(value).loginError;
     this.firstLogin = firstLoginSetting?.value === 'true';
     this.username = this.firstLogin ? 'admin' : this.username;

package/pages/c/_cluster/apps/charts/__tests__/install.test.ts

@@ -522,4 +522,114 @@ describe('page: Install', () => {
       expect(wrapper.vm.registryPullSecret).toBeNull();
     });
   });
+
+  describe('computed properties: monitoring banners', () => {
+    const setupComponent = (existing: any, releaseName: string, componentName: string, chartName: string, installedApps: any[] = [], certified = 'rancher') => {
+      const mockStore = {
+        getters: {
+          'i18n/withFallback':       () => '',
+          'catalog/inStore':         'cluster',
+          'features/get':            () => false,
+          'type-map/hasCustomChart': () => false,
+          'wm/byId':                 () => null,
+          'i18n/t':                  (k: string) => k,
+          'prefs/get':               () => {},
+          'management/all':          () => [],
+          'cluster/all':             () => [],
+          'cluster/byId':            (type: string, id: string) => {
+            if (type === 'catalog.cattle.io.app') {
+              return installedApps.find((app) => app.id === id);
+            }
+
+            return null;
+          },
+          'catalog/charts': [],
+        }
+      };
+
+      return mount(Install as any, {
+        global: {
+          mocks: {
+            $store:      mockStore,
+            $route:      { query: {} },
+            $fetchState: { pending: false },
+            t:           (k: string) => k,
+          },
+          stubs: {
+            Loading:             true,
+            Wizard:              true,
+            Banner:              true,
+            Checkbox:            true,
+            LabeledInput:        true,
+            LabeledSelect:       true,
+            NameNsDescription:   true,
+            Tabbed:              true,
+            Questions:           true,
+            YamlEditor:          true,
+            ResourceCancelModal: true,
+            UnitInput:           true,
+            TypeDescription:     true,
+            LazyImage:           true,
+            ChartReadme:         true,
+            ButtonGroup:         true,
+          }
+        },
+        data() {
+          return {
+            existing,
+            version: {
+              annotations: {
+                [CATALOG_ANNOTATIONS.RELEASE_NAME]: releaseName,
+                [CATALOG_ANNOTATIONS.COMPONENT]:    componentName,
+                [CATALOG_ANNOTATIONS.CERTIFIED]:    certified,
+              }
+            },
+            chart: {
+              chartName,
+              versions: []
+            },
+            query: { versionName: '1.0.0' }
+          };
+        }
+      });
+    };
+
+    it('showMonitoringBanner should return translation key if releaseName matches rancher-monitoring (install or edit)', () => {
+      const wrapper1 = setupComponent(true, 'rancher-monitoring', '', '');
+
+      expect((wrapper1.vm as any).showMonitoringBanner).toBe('catalog.install.steps.basics.oldMonitoringChartWarning');
+
+      const wrapper2 = setupComponent(true, '', 'rancher-monitoring', 'rancher-monitoring');
+
+      expect((wrapper2.vm as any).showMonitoringBanner).toBeNull();
+
+      const wrapper3 = setupComponent(false, 'rancher-monitoring', '', '');
+
+      expect((wrapper3.vm as any).showMonitoringBanner).toBe('catalog.install.steps.basics.oldMonitoringChartWarning');
+    });
+
+    it('showMonitoringBanner should return translation key if existing is false and releaseName matches rancher-monitoring-dashboards', () => {
+      const wrapper1 = setupComponent(false, 'rancher-monitoring-dashboards', '', '');
+
+      expect((wrapper1.vm as any).showMonitoringBanner).toBe('catalog.install.steps.basics.newMonitoringChartWarning');
+
+      const wrapper2 = setupComponent(false, '', 'rancher-monitoring-dashboards', 'rancher-monitoring-dashboards');
+
+      expect((wrapper2.vm as any).showMonitoringBanner).toBeNull();
+
+      const wrapper3 = setupComponent(true, 'rancher-monitoring-dashboards', '', '');
+
+      expect((wrapper3.vm as any).showMonitoringBanner).toBeNull();
+    });
+
+    it('showMonitoringBanner should return null when the chart is not Rancher-certified, even if the release name matches', () => {
+      const oldChartThirdParty = setupComponent(false, 'rancher-monitoring', '', '', [], 'partner');
+
+      expect((oldChartThirdParty.vm as any).showMonitoringBanner).toBeNull();
+
+      const newChartThirdParty = setupComponent(false, 'rancher-monitoring-dashboards', '', '', [], '');
+
+      expect((newChartThirdParty.vm as any).showMonitoringBanner).toBeNull();
+    });
+  });
 });

package/pages/c/_cluster/apps/charts/install.vue

@@ -515,6 +515,29 @@ export default {
     ...mapGetters({ inStore: 'catalog/inStore', features: 'features/get' }),
     mcm: mapFeature(MULTI_CLUSTER),
 
+    showMonitoringBanner() {
+      const annotations = this.version?.annotations || {};
+      const releaseName = annotations[CATALOG_ANNOTATIONS.RELEASE_NAME];
+      const certified = annotations[CATALOG_ANNOTATIONS.CERTIFIED];
+
+      // Only show monitoring banners for the Rancher-certified charts —
+      // a third-party chart that happens to reuse the release name should not
+      // trigger our migration prompts.
+      if (certified !== 'rancher') {
+        return null;
+      }
+
+      if (releaseName === 'rancher-monitoring') {
+        return this.t('catalog.install.steps.basics.oldMonitoringChartWarning');
+      }
+
+      if (!this.existing && releaseName === 'rancher-monitoring-dashboards') {
+        return this.t('catalog.install.steps.basics.newMonitoringChartWarning');
+      }
+
+      return null;
+    },
+
     /**
      * Return list of variables to filter chart questions
      */
@@ -1678,6 +1701,12 @@ export default {
       </template>
       <template #basics>
         <div class="step__basic">
+          <Banner
+            v-if="showMonitoringBanner"
+            color="warning"
+          >
+            {{ showMonitoringBanner }}
+          </Banner>
           <Banner
             v-if="step1Description"
             color="info"