@rancher/shell 3.0.11 → 3.0.12-rc.2

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

@@ -4,7 +4,6 @@ import Loading from '@shell/components/Loading';
 import { Banner } from '@components/Banner';
 import CruResource from '@shell/components/CruResource';
 import SelectIconGrid from '@shell/components/SelectIconGrid';
-import EmberPage from '@shell/components/EmberPage';
 import {
   CHART, FROM_CLUSTER, SUB_TYPE, RKE_TYPE, _EDIT, _IMPORT, _CONFIG, _VIEW
 } from '@shell/config/query-params';
@@ -18,8 +17,8 @@ import { mapFeature, RKE2 as RKE2_FEATURE } from '@shell/store/features';
 import { allHash } from '@shell/utils/promise';
 import { BLANK_CLUSTER } from '@shell/store/store-types.js';
 import { ELEMENTAL_PRODUCT_NAME, ELEMENTAL_CLUSTER_PROVIDER } from '../../config/elemental-types';
+import { KONTAINER_TO_DRIVER } from '@shell/models/management.cattle.io.kontainerdriver';
 import Rke2Config from './rke2';
-import { DRIVER_TO_IMPORT } from '@shell/models/management.cattle.io.kontainerdriver';
 import { requireAsset } from '@shell/utils/require-asset';
 
 const SORT_GROUPS = {
@@ -44,7 +43,6 @@ export default {
 
   components: {
     CruResource,
-    EmberPage,
     Loading,
     Rke2Config,
     SelectIconGrid,
@@ -103,19 +101,6 @@ export default {
       hash.kontainerDrivers = this.$store.dispatch('management/findAll', { type: MANAGEMENT.KONTAINER_DRIVER });
     }
 
-    // Not sure if needed for legacy hosted cluster?
-    if ( this.value.id && !this.value.isRke2 ) {
-      // These are needed to resolve references in the mgmt cluster -> node pool -> node template to figure out what provider the cluster is using
-      // so that the edit iframe for ember pages can go to the right place.
-      if (this.$store.getters[`management/canList`](MANAGEMENT.NODE_POOL)) {
-        hash.rke1NodePools = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_POOL });
-      }
-
-      if (this.$store.getters[`management/canList`](MANAGEMENT.NODE_TEMPLATE)) {
-        hash.rke1NodeTemplates = this.$store.dispatch('management/findAll', { type: MANAGEMENT.NODE_TEMPLATE });
-      }
-    }
-
     const res = await allHash(hash);
 
     this.nodeDrivers = res.nodeDrivers || [];
@@ -172,11 +157,50 @@ export default {
     if ( this.$route.query[SUB_TYPE]) {
       subType = this.$route.query[SUB_TYPE];
     } else if (this.value.isImported) {
+      // Default imported clusters to the generic imported subType.
+      // Imported hosted clusters (e.g. AKS, EKS, GKE) that have an extension-provided
+      // component will be overridden below to load the correct custom form.
       subType = IMPORTED;
     } else if (this.value.isLocal) {
       subType = LOCAL;
     }
 
+    // For imported hosted clusters, check if the provisioner has a matching extension
+    // component and override the subType so the correct custom form loads instead of
+    // the generic imported configuration page.
+    if (subType === IMPORTED && this.value?.id && this.value.provisioner) {
+      const provisionerLower = this.value.provisioner.toLowerCase();
+      const hasExtension = this.extensions.some((ext) => ext.id === provisionerLower);
+
+      if (hasExtension) {
+        subType = provisionerLower;
+      }
+    }
+
+    // Auto-detect subType for existing clusters being edited
+    if ( !subType && this.value?.id ) {
+      // Check for extension annotation first
+      const fromAnnotation = this.value.annotations?.[CAPI_ANNOTATIONS.UI_CUSTOM_PROVIDER];
+
+      if (fromAnnotation) {
+        subType = fromAnnotation;
+      } else if ( this.value.isRke2 ) {
+        // For custom RKE2 clusters
+        if ( this.value.isCustom && (this.realMode === _EDIT || (this.as === _CONFIG && this.realMode === _VIEW)) ) {
+          subType = 'custom';
+        } else if ( this.value.machineProvider ) {
+          // For RKE2/K3s clusters provisioned in Rancher, use the machine pool provisioner
+          subType = this.value.machineProvider;
+        }
+      } else if ( this.value.provisioner ) {
+        // For non-RKE2 clusters, try to match against extension-provided subtypes
+        const provisionerLower = this.value.provisioner.toLowerCase();
+
+        // This will be checked against available subtypes after they're computed
+        subType = provisionerLower;
+      }
+    }
+
     this.subType = subType;
   },
 
@@ -217,74 +241,6 @@ export default {
     },
     _RKE2: () => _RKE2,
 
-    emberLink() {
-      if (this.value) {
-        // set subtype if editing EKS/GKE/AKS cluster -- this ensures that the component provided by extension is loaded instead of iframing old ember ui
-        if (this.value.provisioner) {
-          const matchingSubtype = this.subTypes.find((st) => {
-            const typeLower = st.id.toLowerCase();
-            const provisionerLower = this.value.provisioner.toLowerCase();
-
-            // This allows extensions to provide type for edit without breaking edit for Ember kontainer providers
-            return (!!st.component && (typeLower === provisionerLower)) || (DRIVER_TO_IMPORT[typeLower] === provisionerLower);
-          });
-
-          if (matchingSubtype) {
-            this.selectType(matchingSubtype.id, false);
-          }
-        }
-
-        // subType set by the ui during cluster creation
-        // this is likely from a ui extension trying to load custom ui to edit the cluster
-        const fromAnnotation = this.value.annotations?.[CAPI_ANNOTATIONS.UI_CUSTOM_PROVIDER];
-
-        if (fromAnnotation) {
-          this.selectType(fromAnnotation, false);
-
-          return '';
-        }
-
-        // For custom RKE2 clusters, don't load an Ember page.
-        // It should be the dashboard.
-        if ( this.value.isRke2 && ((this.value.isCustom && this.mode === _EDIT) || (this.value.isCustom && this.as === _CONFIG && this.mode === _VIEW) || (this.subType || '').toLowerCase() === 'custom')) {
-          // For admins, this.value.isCustom is used to check if it is a custom cluster.
-          // For cluster owners, this.subtype is used.
-          this.selectType('custom', false);
-
-          return '';
-        }
-        // For existing RKE2/K3s clusters provisioned in Rancher,
-        // set the subtype using the machine pool provisioner
-        // do not use an iFramed Ember page.
-        if ( this.value.isRke2 && this.value.machineProvider ) {
-          this.selectType(this.value.machineProvider, false);
-
-          return '';
-        }
-
-        if ( this.subType ) {
-          // if driver type has a custom form component, don't load an ember page
-          if (this.selectedSubType?.component) {
-            return '';
-          }
-          // For RKE1 and hosted Kubernetes Clusters, set the ember link
-          // so that we load the page rather than using RKE2 create
-          if (this.selectedSubType?.emberLink) {
-            return this.selectedSubType.emberLink;
-          }
-
-          return '';
-        }
-
-        if ( this.value.mgmt?.emberEditPath ) {
-          // Iframe an old page
-          return this.value.mgmt.emberEditPath;
-        }
-      }
-
-      return '';
-    },
-
     rke2Enabled: mapFeature(RKE2_FEATURE),
 
     // todo nb is this info stored anywhere else..?
@@ -310,6 +266,24 @@ export default {
       return this.value.isRke2;
     },
 
+    isEmberKontainerDriver() {
+      // RKE2/K3s clusters are never legacy Ember kontainer drivers
+      if (!this.value?.id || !this.value?.provisioner || this.value.isRke2) {
+        return false;
+      }
+
+      const provisioner = this.value.provisioner.toLowerCase();
+      // Resolve the provisioner to a driver name using the KONTAINER_TO_DRIVER map
+      const resolvedName = KONTAINER_TO_DRIVER[provisioner] || provisioner;
+
+      const driver = this.kontainerDrivers.find((d) => {
+        return d.driverName === resolvedName || d.driverName === provisioner || d.id === provisioner;
+      });
+
+      // If the driver exists and is not built-in, it's a legacy ember driver
+      return !!driver && !driver.spec?.builtIn;
+    },
+
     templateOptions() {
       if ( !this.rke2Enabled ) {
         return [];
@@ -327,16 +301,14 @@ export default {
       let out = [];
 
       const templates = this.templateOptions;
-      const vueKontainerTypes = getters['plugins/clusterDrivers'];
       const machineTypes = this.nodeDrivers.filter((x) => x.spec.active && x.state === 'active');
 
-      // Keeping this for non Rancher-managed kontainer drivers
+      // Kontainer drivers that don't have an extension-provided component are legacy Ember-based
+      // and no longer functional. Show them as disabled with an informational tooltip.
+      const emberRemovalTooltip = getters['i18n/t']('drivers.kontainer.emberRemovalTooltip');
+
       this.kontainerDrivers.filter((x) => (isImport ? x.showImport : x.showCreate)).forEach((obj) => {
-        if ( vueKontainerTypes.includes(obj.driverName) ) {
-          addType(this.$extension, obj.driverName, 'hosted', false);
-        } else {
-          addType(this.$extension, obj.driverName, 'hosted', false, (isImport ? obj.emberImportPath : obj.emberCreatePath));
-        }
+        addType(this.$extension, obj.driverName, 'hosted', true, undefined, undefined, emberRemovalTooltip);
       });
       if (!isImport) {
         templates.forEach((chart) => {
@@ -360,7 +332,7 @@ export default {
           machineTypes.forEach((type) => {
             const id = type.spec.displayName || type.id;
 
-            addType(this.$extension, id, _RKE2, false, null, undefined, type);
+            addType(this.$extension, id, _RKE2, false, undefined, type);
           });
 
           addType(this.$extension, 'custom', 'custom2', false);
@@ -409,7 +381,7 @@ export default {
         out.push(subtype);
       }
 
-      function addType(plugin, id, group, disabled = false, emberLink = null, iconClass = undefined, providerConfig = undefined) {
+      function addType(plugin, id, group, disabled = false, iconClass = undefined, providerConfig = undefined, tooltip = undefined) {
         const label = getters['i18n/withFallback'](`cluster.provider."${ id }"`, null, id);
         const description = getters['i18n/withFallback'](`cluster.providerDescription."${ id }"`, null, '');
         const tag = '';
@@ -439,8 +411,8 @@ export default {
           iconClass,
           group,
           disabled,
-          emberLink,
           tag,
+          tooltip,
           providerConfig
         };
 
@@ -594,12 +566,11 @@ export default {
     />
   </div>
   <div
-    v-else-if="emberLink"
-    class="embed"
+    v-else-if="isEmberKontainerDriver"
   >
-    <EmberPage
-      :force-new="true"
-      :src="emberLink"
+    <Banner
+      color="warning"
+      label-key="drivers.kontainer.emberRemovalMessage"
     />
   </div>
   <CruResource

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

@@ -297,7 +297,8 @@ export default {
       originalKubeVersion:                      null,
       isEmpty,
       AGENT_CONFIGURATION_TYPES,
-      basicsValid:                              true
+      basicsValid:                              true,
+      originalIngressController:                this.value.spec.rkeConfig.machineGlobalConfig?.[INGRESS_CONTROLLER] || INGRESS_NONE,
     };
   },
 
@@ -2522,6 +2523,7 @@ export default {
               <Tab
                 v-if="!obj.remove"
                 :key="obj.id"
+                :weight="-1 * idx"
                 :name="obj.id"
                 :label="obj.pool.name || '(Not Named)'"
                 :show-header="false"
@@ -2592,6 +2594,7 @@ export default {
               :is-azure-provider-unsupported="isAzureProviderUnsupported"
               :can-azure-migrate-on-edit="canAzureMigrateOnEdit"
               :has-some-ipv6-pools="hasOnlyIpv6Pools"
+              :original-ingress-controller="originalIngressController"
               @update:value="$emit('input', $event)"
               @cilium-values-changed="handleCiliumValuesChanged"
               @enabled-system-services-changed="handleEnabledSystemServicesChanged"

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

@@ -120,6 +120,11 @@ export default {
     canAzureMigrateOnEdit: {
       type:     Boolean,
       required: true
+    },
+    originalIngressController: {
+      type:     [String, Array],
+      required: false,
+      default:  INGRESS_NONE
     }
   },
 
@@ -699,6 +704,7 @@ export default {
       :traefik-chart="traefikChart"
       :user-chart-values="userChartValues"
       :version-info="versionInfo"
+      :original-ingress-controller="originalIngressController"
       @update-values="(name, val) => $emit('update-values', name, val)"
       @error="$emit('error', $event)"
       @yaml-validation-changed="e => $emit('yaml-validation-changed', e)"

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

@@ -24,6 +24,7 @@ interface Props {
   traefikChart: string;
   userChartValues: any;
   versionInfo: any;
+  originalIngressController?: string | string[];
 }
 const {
   mode = _CREATE,
@@ -33,7 +34,8 @@ const {
   nginxSupported,
   traefikSupported,
   userChartValues,
-  versionInfo
+  versionInfo,
+  originalIngressController = INGRESS_NONE
 } = defineProps<Props>();
 
 const emit = defineEmits(['update:value', 'error', 'config-validation-changed', 'yaml-validation-changed', 'update-values']);
@@ -179,7 +181,10 @@ const compatibilityMode = computed({
 
 function selectIngress(id: string) {
   if ( id === INGRESS_DUAL) {
-    emit('update:value', [TRAEFIK, INGRESS_NGINX]);
+    const newValue: string | string[] = !Array.isArray(originalIngressController) ? (originalIngressController === TRAEFIK ? [TRAEFIK, INGRESS_NGINX] : [INGRESS_NGINX, TRAEFIK]) : originalIngressController;
+
+    emit('update:value', newValue);
+
     preconfigureTraefik();
   } else {
     emit('update:value', id);

package/initialize/App.vue

@@ -1,10 +1,16 @@
 <script>
 import GlobalLoading from '@shell/components/nav/GlobalLoading.vue';
+import WindowManager from '@shell/components/nav/WindowManager';
 
 import '@shell/assets/styles/app.scss';
 
 export default {
-  data: () => ({ isOnline: true }),
+  data() {
+    return {
+      isOnline:      true,
+      currentLayout: null,
+    };
+  },
 
   created() {
     // add to window so we can listen when ready
@@ -36,6 +42,14 @@ export default {
     this.$loading = this.$refs.loading;
   },
 
+  provide() {
+    return {
+      notifyWmContainerReady: (layout) => {
+        this.currentLayout = layout;
+      }
+    };
+  },
+
   computed: {
     isOffline() {
       return !this.isOnline;
@@ -55,7 +69,10 @@ export default {
     },
   },
 
-  components: { GlobalLoading }
+  components: {
+    GlobalLoading,
+    WindowManager,
+  }
 };
 </script>
 <template>
@@ -65,6 +82,16 @@ export default {
       id="__layout"
     >
       <router-view />
+      <!--
+        WindowManager is teleported into each template's wm-container
+        This keeps a single instance that never re-mounts while appearing in each template
+      -->
+      <Teleport
+        v-if="currentLayout"
+        :to="`#wm-container-${currentLayout}`"
+      >
+        <WindowManager :layout="currentLayout" />
+      </Teleport>
     </div>
   </div>
 </template>

package/initialize/install-plugins.js

@@ -21,7 +21,6 @@ import plugin from '@shell/plugins/plugin';
 import pluginsLoader from '@shell/core/plugins-loader.js';
 import replaceAll from '@shell/plugins/replaceall';
 import steveCreateWorker from '@shell/plugins/steve-create-worker';
-import emberCookie from '@shell/plugins/ember-cookie';
 import ShortKey from '@shell/plugins/shortkey';
 import { initUiApis } from '@shell/apis/impl/apis';
 
@@ -57,7 +56,6 @@ export async function installInjectedPlugins(app, vueApp) {
     replaceAll,
     plugin,
     steveCreateWorker,
-    emberCookie,
     dynamicContent,
   ];
 

package/list/__tests__/management.cattle.io.feature.test.ts

@@ -0,0 +1,105 @@
+import { shallowMount } from '@vue/test-utils';
+
+jest.mock('@shell/mixins/resource-fetch', () => ({
+  __esModule: true,
+  default:    {
+    data() {
+      return {
+        forceUpdateLiveAndDelayed: 0, loading: false, rows: []
+      };
+    },
+    async $fetchType() {}
+  }
+}));
+
+// eslint-disable-next-line import/first
+import ManagementFeature from '@shell/list/management.cattle.io.feature.vue';
+
+const createMockStore = () => ({
+  getters: {
+    'i18n/t':               (key: string) => key,
+    'management/schemaFor': () => ({ resourceMethods: ['PUT'] }),
+  },
+  dispatch: jest.fn(),
+});
+
+const createWrapper = (rows: any[]) => {
+  return shallowMount(ManagementFeature, {
+    props: {
+      resource: 'management.cattle.io.feature',
+      schema:   { id: 'management.cattle.io.feature' } as any,
+    },
+    data:   () => ({ rows }),
+    global: {
+      mocks: {
+        $store:      createMockStore(),
+        $fetchState: { pending: false },
+        $fetchType:  jest.fn(),
+      },
+      stubs: {
+        // Render the cell:name slot directly so we can assert on the lock icon
+        ResourceTable: {
+          props:    ['rows'],
+          template: '<div><slot name="cell:name" :row="rows[0]" /></div>',
+        },
+      },
+    }
+  });
+};
+
+describe('list/management.cattle.io.feature', () => {
+  describe('locked icon rendering in cell:name slot', () => {
+    it('should render the lock icon when status.lockedValue is not null', () => {
+      const row = {
+        metadata:    { name: 'feature-a' },
+        nameDisplay: 'feature-a',
+        status:      { lockedValue: true },
+      };
+
+      const wrapper = createWrapper([row]);
+
+      expect(wrapper.find('i.icon-lock').exists()).toBe(true);
+    });
+
+    it('should not render the lock icon when status.lockedValue is null', () => {
+      const row = {
+        metadata:    { name: 'feature-a' },
+        nameDisplay: 'feature-a',
+        status:      { lockedValue: null },
+      };
+
+      const wrapper = createWrapper([row]);
+
+      expect(wrapper.find('i.icon-lock').exists()).toBe(false);
+    });
+
+    it('should not throw and should not render the lock icon when status is missing (malformed feature flag)', () => {
+      const row = {
+        metadata:    { name: 'feature-a' },
+        nameDisplay: 'feature-a',
+      };
+
+      expect(() => createWrapper([row])).not.toThrow();
+
+      const wrapper = createWrapper([row]);
+
+      expect(wrapper.find('i.icon-lock').exists()).toBe(false);
+    });
+  });
+
+  describe('filteredRows', () => {
+    it('should filter out hidden feature flags', () => {
+      const rows = [
+        { metadata: { name: 'fleet' } },
+        { metadata: { name: 'some-feature' } },
+      ];
+
+      const wrapper = createWrapper(rows);
+
+      const filtered = (wrapper.vm as any).filteredRows;
+
+      expect(filtered).toHaveLength(1);
+      expect(filtered[0].metadata.name).toBe('some-feature');
+    });
+  });
+});

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

@@ -40,14 +40,15 @@ export default {
     data-testid="installed-app-catalog-list"
   >
     <template #cell:upgrade="{row}">
-      <span
+      <div
         v-if="row.upgradeAvailable === APP_UPGRADE_STATUS.SINGLE_UPGRADE"
-        class="badge-state bg-warning hand"
+        v-clean-tooltip="row.upgradeAvailableVersion"
+        class="badge-state bg-warning hand app-upgrade-badge"
         @click="row.goToUpgrade(row.upgradeAvailableVersion)"
       >
-        {{ row.upgradeAvailableVersion }}
+        <div>{{ row.upgradeAvailableVersion }}</div>
         <i class="icon icon-upload" />
-      </span>
+      </div>
       <span
         v-else-if="row.upgradeAvailable === APP_UPGRADE_STATUS.NOT_APPLICABLE"
         v-t="'catalog.app.managed'"
@@ -69,8 +70,27 @@ export default {
   </PaginatedResourceTable>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .apps :deep() .state-description{
   color: var(--error)
 }
+
+.badge-state.app-upgrade-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--border-radius);
+  padding: 2px 4px;
+
+  > div {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  > .icon {
+    flex-shrink: 0;
+  }
+}
+
 </style>

package/list/management.cattle.io.feature.vue

@@ -69,7 +69,7 @@ export default {
         <div class="feature-name">
           <div>{{ scope.row.nameDisplay }}</div>
           <i
-            v-if="scope.row.status.lockedValue !== null"
+            v-if="scope.row.status && scope.row.status.lockedValue !== null"
             class="icon icon-lock"
           />
         </div>

package/list/management.cattle.io.fleetworkspace.vue

@@ -21,6 +21,14 @@ export default {
     }
   },
 
+  created() {
+    this.$store.dispatch('showWorkspaceSwitcher', false);
+  },
+
+  beforeUnmount() {
+    this.$store.dispatch('showWorkspaceSwitcher', true);
+  },
+
   async fetch() {
     try {
       await this.$fetchType(this.resource);

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

@@ -220,7 +220,6 @@ export default {
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
       :data-testid="'cluster-list'"
       :force-update-live-and-delayed="forceUpdateLiveAndDelayed"
-      :sub-rows="true"
     >
       <!-- Why are state column and subrow overwritten here? -->
       <!-- for rke1 clusters, where they try to use the mgmt cluster stateObj instead of prov cluster stateObj,  -->

package/list/workload.vue

@@ -99,13 +99,21 @@ export default {
     const schema = type !== workloadSchema.id ? this.$store.getters['cluster/schemaFor'](type) : workloadSchema;
     const paginationEnabled = !allTypes && this.$store.getters[`cluster/paginationEnabled`]?.({ id: type });
 
+    const workloadIncludeAssociatedData = paginationEnabled && [
+      WORKLOAD_TYPES.DEPLOYMENT,
+      WORKLOAD_TYPES.DAEMON_SET,
+      WORKLOAD_TYPES.STATEFUL_SET,
+      WORKLOAD_TYPES.JOB,
+    ].includes(type);
+
     return {
       allTypes,
       schema,
       paginationEnabled,
       resources: [],
       loadResources,
-      loadIndeterminate
+      loadIndeterminate,
+      workloadIncludeAssociatedData
     };
   },
 
@@ -143,10 +151,8 @@ export default {
      * Fetch resources required to populate POD_RESTARTS and WORKLOAD_HEALTH_SCALE columns
      */
     loadHeathResources() {
-      // See https://github.com/rancher/dashboard/issues/10417, health comes from selectors applied locally to all pods (bad)
       if (this.paginationEnabled) {
-        // Unfortunately with SSP enabled we cannot fetch all pods to then let each row find applicable pods by locally applied selectors (bad for scaling)
-        // See https://github.com/rancher/dashboard/issues/14211
+        // When SSP is enabled we efficiently fetch stats for health column imbedded in the original resource type by supplying `includeAssociatedData` param
         return;
       }
 
@@ -184,6 +190,7 @@ export default {
       v-if="paginationEnabled"
       :schema="schema"
       :use-query-params-for-simple-filtering="useQueryParamsForSimpleFiltering"
+      :includeAssociatedData="workloadIncludeAssociatedData"
     />
     <ResourceTable
       v-else

package/machine-config/amazonec2.vue

@@ -329,6 +329,7 @@ export default {
               :searchable="true"
               :disabled="disabled"
               :label="t('cluster.machineConfig.amazonEc2.region')"
+              data-testid="amazonEc2__region"
             />
           </div>
           <div class="col span-6">