@rancher/shell 3.0.7 → 3.0.8-rc.10

package/config/settings.ts

@@ -52,6 +52,7 @@ export const SETTING = {
   RKE_METADATA_CONFIG:                           'rke-metadata-config',
   EULA_AGREED:                                   'eula-agreed',
   AUTH_USER_INFO_MAX_AGE_SECONDS:                'auth-user-info-max-age-seconds',
+  AUTH_USER_SESSION_IDLE_TTL_MINUTES:            'auth-user-session-idle-ttl-minutes',
   AUTH_USER_SESSION_TTL_MINUTES:                 'auth-user-session-ttl-minutes',
   AUTH_USER_INFO_RESYNC_CRON:                    'auth-user-info-resync-cron',
   AUTH_LOCAL_VALIDATE_DESC:                      'auth-password-requirements-description',
@@ -109,7 +110,13 @@ export const SETTING = {
   SYSTEM_AGENT_UPGRADER_INSTALL_CONCURRENCY:     'system-agent-upgrader-install-concurrency',
   IMPORTED_CLUSTER_VERSION_MANAGEMENT:           'imported-cluster-version-management',
   CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS:          'cluster-agent-default-priority-class',
-  CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET: 'cluster-agent-default-pod-disruption-budget'
+  CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET: 'cluster-agent-default-pod-disruption-budget',
+  KEV2_OPERATORS:                                'kev2-operators',
+  /**
+   * Dynamic Content settings
+   */
+  DYNAMIC_CONTENT_ENABLED:                       'ui-content-enabled',
+  DYNAMIC_CONTENT_ENDPOINT:                      'ui-content-endpoint',
 } as const;
 
 // These are the settings that are allowed to be edited via the UI
@@ -140,6 +147,7 @@ export const ALLOWED_SETTINGS: GlobalSetting = {
   },
   [SETTING.INGRESS_IP_DOMAIN]:                    {},
   [SETTING.AUTH_USER_INFO_MAX_AGE_SECONDS]:       {},
+  [SETTING.AUTH_USER_SESSION_IDLE_TTL_MINUTES]:   {},
   [SETTING.AUTH_USER_SESSION_TTL_MINUTES]:        {},
   [SETTING.AUTH_TOKEN_MAX_TTL_MINUTES]:           {},
   [SETTING.KUBECONFIG_GENERATE_TOKEN]:            { kind: 'boolean' },
@@ -186,7 +194,7 @@ export const PROVISIONING_SETTINGS = [
   SETTING.K3S_UPGRADER_UNINSTALL_CONCURRENCY,
   SETTING.IMPORTED_CLUSTER_VERSION_MANAGEMENT,
   SETTING.CLUSTER_AGENT_DEFAULT_PRIORITY_CLASS,
-  SETTING.CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET
+  SETTING.CLUSTER_AGENT_DEFAULT_POD_DISTRIBUTION_BUDGET,
 ];
 
 /**

package/config/store.js

@@ -35,11 +35,12 @@ let store = {};
   resolveStoreModules(require('../store/slideInPanel.ts'), 'slideInPanel.ts');
   resolveStoreModules(require('../store/type-map.js'), 'type-map.js');
   resolveStoreModules(require('../store/uiplugins.ts'), 'uiplugins.ts');
-  resolveStoreModules(require('../store/wm.js'), 'wm.js');
+  resolveStoreModules(require('../store/wm.ts'), 'wm.ts');
   resolveStoreModules(require('../store/customisation.js'), 'customisation.js');
   resolveStoreModules(require('../store/cru-resource.ts'), 'cru-resource.ts');
   resolveStoreModules(require('../store/notifications.ts'), 'notifications.ts');
   resolveStoreModules(require('../store/cookies.ts'), 'cookies.ts');
+  resolveStoreModules(require('../store/ui-context.ts'), 'ui-context.ts');
 
   // If the environment supports hot reloading...
 
@@ -66,11 +67,12 @@ let store = {};
       '../store/slideInPanel.ts',
       '../store/type-map.js',
       '../store/uiplugins.ts',
-      '../store/wm.js',
+      '../store/wm.ts',
       '../store/customisation.js',
       '../store/cru-resource.ts',
       '../store/notifications.ts',
       '../store/cookies.ts',
+      '../store/ui-context.ts',
     ], () => {
       // Update `root.modules` with the latest definitions.
       updateModules();

package/config/table-headers.js

@@ -1183,3 +1183,11 @@ export const PROJECT = {
   name:     'project',
   labelKey: 'tableHeaders.project',
 };
+
+export const AUTOSCALER_ENABLED = {
+  name:      'autoscaler',
+  labelKey:  'tableHeaders.autoscaler',
+  value:     'isAutoscalerEnabled',
+  sort:      ['autoscaler'],
+  formatter: 'Autoscaler',
+};

package/config/types.js

@@ -222,6 +222,15 @@ export const MANAGEMENT = {
   OIDC_CLIENT:                   'management.cattle.io.oidcclient'
 };
 
+export const BRAND = {
+  SUSE:    'suse',
+  CSP:     'csp',
+  FEDERAL: 'federal',
+  RGS:     'rgs',
+};
+
+export const EXT = { USER_ACTIVITY: 'ext.cattle.io.useractivity' };
+
 export const CAPI = {
   CAPI_CLUSTER:         'cluster.x-k8s.io.cluster',
   MACHINE_DEPLOYMENT:   'cluster.x-k8s.io.machinedeployment',
@@ -362,3 +371,5 @@ export const DEFAULT_GRAFANA_STORAGE_SIZE = '10Gi';
 
 export const DEPRECATED = 'Deprecated';
 export const EXPERIMENTAL = 'Experimental';
+export const AUTOSCALER_CONFIG_MAP_ID = 'kube-system/cluster-autoscaler-status';
+export const HOSTED_PROVIDER = 'hostedprovider';

package/config/uiplugins.js

@@ -1,4 +1,5 @@
 import semver from 'semver';
+import { isRancherPrime } from '@shell/config/version';
 
 // Version of the plugin API supported
 // here we inject the current shell version that we read in vue.config
@@ -43,6 +44,7 @@ export const UI_PLUGIN_CHART_ANNOTATIONS = {
   EXTENSIONS_HOST:    'catalog.cattle.io/ui-extensions-host',
   DISPLAY_NAME:       'catalog.cattle.io/display-name',
   HIDDEN_BUILTIN:     'catalog.cattle.io/ui-hidden-builtin',
+  PRIME_ONLY:         'catalog.cattle.io/prime-only'
 };
 
 // Extension catalog labels
@@ -58,6 +60,7 @@ export const EXTENSIONS_INCOMPATIBILITY_TYPES = {
   EXTENSIONS_API:         'extensionsApiVersion',
   KUBE:                   'kubeVersion',
   HOST:                   'host',
+  PRIME_ONLY:             'primeOnly',
 };
 
 export const EXTENSIONS_INCOMPATIBILITY_DATA = {
@@ -87,6 +90,11 @@ export const EXTENSIONS_INCOMPATIBILITY_DATA = {
     tooltipKey:     'plugins.info.requiresHost',
     mainHost:       UI_PLUGIN_HOST_APP,
   },
+  PRIME_ONLY: {
+    type:           EXTENSIONS_INCOMPATIBILITY_TYPES.PRIME_ONLY,
+    cardMessageKey: 'plugins.incompatiblePrimeOnly',
+    tooltipKey:     'plugins.info.requiresRancherPrime',
+  },
 };
 
 export function isUIPlugin(chart) {
@@ -124,10 +132,29 @@ export function parseRancherVersion(v) {
  * Check if a version is incompatible with the current environment
  */
 function checkIncompatibility(currentVersion, requiredVersion, incompatibilityData, returnObj, versionObj) {
-  if ((incompatibilityData.type === EXTENSIONS_INCOMPATIBILITY_TYPES.EXTENSIONS_API_MISSING && !requiredVersion) || (requiredVersion && !semver.satisfies(currentVersion, requiredVersion))) {
+  let passed = true;
+
+  switch (incompatibilityData.type) {
+  case EXTENSIONS_INCOMPATIBILITY_TYPES.PRIME_ONLY:
+    if (requiredVersion && !currentVersion) {
+      passed = false;
+    }
+    break;
+  case EXTENSIONS_INCOMPATIBILITY_TYPES.EXTENSIONS_API_MISSING:
+    !requiredVersion ? passed = false : passed = true;
+    break;
+  default:
+    if (requiredVersion && !semver.satisfies(currentVersion, requiredVersion)) {
+      passed = false;
+    }
+    break;
+  }
+
+  if (!passed) {
     if (!returnObj) {
       return false;
     }
+
     versionObj.isVersionCompatible = false;
     versionObj.versionIncompatibilityData = { ...incompatibilityData, required: requiredVersion };
 
@@ -137,7 +164,7 @@ function checkIncompatibility(currentVersion, requiredVersion, incompatibilityDa
   return true;
 }
 
-// i18n-uses plugins.error.generic, plugins.error.api, plugins.error.host, plugins.error.kubeVersion, plugins.error.version, plugins.error.developerPkg, plugins.error.apiAnnotationMissing
+// i18n-uses plugins.error.generic, plugins.error.api, plugins.error.host, plugins.error.kubeVersion, plugins.error.version, plugins.error.developerPkg, plugins.error.apiAnnotationMissing, plugins.error.primeOnly
 
 /**
  * Whether an extension should be loaded based on the metadata returned by the backend in the UIPlugins resource instance
@@ -148,6 +175,8 @@ function checkIncompatibility(currentVersion, requiredVersion, incompatibilityDa
  * @returns String | Boolean
  */
 export function shouldNotLoadPlugin(UIPluginResource, { rancherVersion, kubeVersion }, loadedPlugins) {
+  const isCurrRancherPrime = isRancherPrime();
+
   const {
     name, version, endpoint, compressedEndpoint
   } = UIPluginResource;
@@ -171,6 +200,13 @@ export function shouldNotLoadPlugin(UIPluginResource, { rancherVersion, kubeVers
     return 'plugins.error.api';
   }
 
+  // Prime only
+  const primeOnlyAnnotation = UIPluginResource.metadata?.[UI_PLUGIN_CHART_ANNOTATIONS.PRIME_ONLY] === 'true';
+
+  if (!isCurrRancherPrime && primeOnlyAnnotation) {
+    return 'plugins.error.primeOnly';
+  }
+
   // Host application
   const requiredHost = UIPluginResource.metadata?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST];
 
@@ -220,10 +256,13 @@ export function shouldNotLoadPlugin(UIPluginResource, { rancherVersion, kubeVers
  * @returns Boolean | Object
  */
 export function isSupportedChartVersion(versionData, returnObj = false) {
+  const isCurrRancherPrime = isRancherPrime();
+
   const { version, rancherVersion, kubeVersion } = versionData;
   const versionObj = {
     ...version, isVersionCompatible: true, versionIncompatibilityData: {}
   };
+
   const parsedRancherVersion = rancherVersion ? parseRancherVersion(rancherVersion) : '';
   const parsedUiExtensionsApiVersion = semver.coerce(UI_EXTENSIONS_API_VERSION)?.version;
 
@@ -258,6 +297,11 @@ export function isSupportedChartVersion(versionData, returnObj = false) {
       requiredVersion:     version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.EXTENSIONS_HOST],
       incompatibilityData: EXTENSIONS_INCOMPATIBILITY_DATA.HOST,
     },
+    {
+      currentVersion:      isCurrRancherPrime,
+      requiredVersion:     version.annotations?.[UI_PLUGIN_CHART_ANNOTATIONS.PRIME_ONLY] === 'true',
+      incompatibilityData: EXTENSIONS_INCOMPATIBILITY_DATA.PRIME_ONLY,
+    }
   ];
 
   for (const { currentVersion, requiredVersion, incompatibilityData } of checks) {

package/config/version.js

@@ -30,4 +30,4 @@ export function setKubeVersionData(v) {
   _kubeVersionData = JSON.parse(JSON.stringify(v));
 }
 
-export const CURRENT_RANCHER_VERSION = '2.12';
+export const CURRENT_RANCHER_VERSION = '2.13';

package/core/__test__/extension-manager-impl.test.js

@@ -0,0 +1,236 @@
+import { DEVELOPER_LOAD_NAME_SUFFIX } from '@shell/core/extension-manager-impl';
+
+// Mock external dependencies
+jest.mock('@shell/store/type-map', () => ({ productsLoaded: jest.fn().mockReturnValue(true) }));
+
+jest.mock('@shell/plugins/dashboard-store/model-loader', () => ({ clearModelCache: jest.fn() }));
+
+jest.mock('@shell/config/uiplugins', () => ({ UI_PLUGIN_BASE_URL: '/api/v1/uiplugins' }));
+
+jest.mock('@shell/plugins/clean-html', () => ({
+  addLinkInterceptor:    jest.fn(),
+  removeLinkInterceptor: jest.fn(),
+}));
+
+// Mock the Plugin class
+jest.mock('@shell/core/plugin', () => {
+  return {
+    Plugin: jest.fn().mockImplementation((id) => ({
+      id,
+      name:            id,
+      types:           {},
+      uiConfig:        {},
+      l10n:            {},
+      modelExtensions: {},
+      stores:          [],
+      locales:         [],
+      routes:          [],
+      validators:      {},
+      uninstallHooks:  [],
+      productNames:    [],
+    })),
+    EXT_IDS: {
+      MODELS:          'models',
+      MODEL_EXTENSION: 'model-extension'
+    },
+    ExtensionPoint: { EDIT_YAML: 'edit-yaml' }
+  };
+});
+
+// Mock PluginRoutes
+jest.mock('@shell/core/plugin-routes', () => {
+  return { PluginRoutes: jest.fn().mockImplementation(() => ({ addRoutes: jest.fn() })) };
+});
+
+describe('extension Manager', () => {
+  let mockStore;
+  let mockApp;
+  let context;
+
+  // These variables will be assigned the fresh functions inside beforeEach
+  let initExtensionManager;
+  let getExtensionManager;
+
+  beforeEach(() => {
+    // singleton instance for every test run, preventing mock store leaks.
+    jest.resetModules();
+
+    // Re-require the System Under Test (SUT)
+    const extensionManagerModule = require('../extension-manager-impl');
+
+    initExtensionManager = extensionManagerModule.initExtensionManager;
+    getExtensionManager = extensionManagerModule.getExtensionManager;
+
+    jest.clearAllMocks();
+
+    // Setup Mock Context
+    mockStore = {
+      getters:  { 'i18n/t': jest.fn() },
+      dispatch: jest.fn(),
+      commit:   jest.fn(),
+    };
+
+    mockApp = { router: {} };
+
+    context = {
+      app:      mockApp,
+      store:    mockStore,
+      $axios:   {},
+      redirect: jest.fn(),
+    };
+
+    // Clean up DOM from previous tests
+    document.head.innerHTML = '';
+  });
+
+  describe('singleton Pattern', () => {
+    it('initializes and returns the same instance', () => {
+      const instance1 = initExtensionManager(context);
+      const instance2 = getExtensionManager();
+      const instance3 = initExtensionManager(context);
+
+      expect(instance1).toBeDefined();
+      expect(instance1).toBe(instance2);
+      expect(instance1).toBe(instance3);
+    });
+  });
+
+  describe('registration (Dynamic)', () => {
+    it('registers and retrieves a dynamic component', () => {
+      const manager = initExtensionManager(context);
+      const mockFn = jest.fn();
+
+      manager.register('component', 'my-component', mockFn);
+
+      const retrieved = manager.getDynamic('component', 'my-component');
+
+      expect(retrieved).toBe(mockFn);
+    });
+
+    it('unregisters a dynamic component', () => {
+      const manager = initExtensionManager(context);
+      const mockFn = jest.fn();
+
+      manager.register('component', 'my-component', mockFn);
+      manager.unregister('component', 'my-component');
+
+      const retrieved = manager.getDynamic('component', 'my-component');
+
+      expect(retrieved).toBeUndefined();
+    });
+  });
+
+  describe('loadPluginAsync (URL Generation)', () => {
+    let manager;
+
+    beforeEach(() => {
+      manager = initExtensionManager(context);
+      // Mock the internal loadAsync so we only test URL generation here
+      jest.spyOn(manager, 'loadAsync').mockImplementation().mockResolvedValue();
+    });
+
+    it('generates correct URL for standard plugin', async() => {
+      const pluginData = { name: 'elemental', version: '1.0.0' };
+      const expectedId = 'elemental-1.0.0';
+      const expectedUrl = `/api/v1/uiplugins/elemental/1.0.0/plugin/elemental-1.0.0.umd.min.js`;
+
+      await manager.loadPluginAsync(pluginData);
+
+      expect(manager.loadAsync).toHaveBeenCalledWith(expectedId, expectedUrl);
+    });
+
+    it('handles "direct" metadata plugins', async() => {
+      const pluginData = {
+        name:     'direct-plugin',
+        version:  '1.0.0',
+        endpoint: 'http://localhost:8000/plugin.js',
+        metadata: { direct: 'true' }
+      };
+
+      await manager.loadPluginAsync(pluginData);
+
+      expect(manager.loadAsync).toHaveBeenCalledWith('direct-plugin-1.0.0', 'http://localhost:8000/plugin.js');
+    });
+
+    it('removes developer suffix from ID but keeps it for internal logic', async() => {
+      const pluginData = {
+        name:    `my-plugin${ DEVELOPER_LOAD_NAME_SUFFIX }`,
+        version: `1.0.0`
+      };
+
+      await manager.loadPluginAsync(pluginData);
+
+      // Expected ID passed to loadAsync should NOT have the suffix
+      const expectedIdWithoutSuffix = 'my-plugin-1.0.0';
+
+      expect(manager.loadAsync).toHaveBeenCalledWith(
+        expectedIdWithoutSuffix,
+        expect.any(String)
+      );
+    });
+  });
+
+  describe('loadAsync (Script Injection)', () => {
+    let manager;
+
+    beforeEach(() => {
+      manager = initExtensionManager(context);
+    });
+
+    it('resolves immediately if element already exists', async() => {
+      const id = 'existing-plugin';
+      const script = document.createElement('script');
+
+      script.id = id;
+      document.body.appendChild(script);
+
+      await expect(manager.loadAsync(id, 'url.js')).resolves.toBeUndefined();
+
+      document.body.removeChild(script);
+    });
+
+    it('injects script tag and initializes plugin on load', async() => {
+      const pluginId = 'test-plugin';
+      const pluginUrl = 'http://test.com/plugin.js';
+
+      // Mock the window object to simulate the plugin loading into global scope
+      const mockPluginInit = jest.fn();
+
+      window[pluginId] = { default: mockPluginInit };
+
+      // Start the load
+      const loadPromise = manager.loadAsync(pluginId, pluginUrl);
+
+      // Find the injected script tag in the DOM
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      expect(script).toBeTruthy();
+      expect(script.src).toBe(pluginUrl);
+
+      // Manually trigger the onload event
+      script.onload();
+
+      // Await the promise
+      await loadPromise;
+
+      // Assertions
+      expect(mockPluginInit).toHaveBeenCalledWith(expect.objectContaining({ id: pluginId }), expect.objectContaining({ ...context }));
+      expect(mockStore.dispatch).toHaveBeenCalledWith('uiplugins/addPlugin', expect.objectContaining({ id: pluginId }));
+
+      // Cleanup
+      delete window[pluginId];
+    });
+
+    it('rejects if script load fails', async() => {
+      const pluginId = 'fail-plugin';
+      const loadPromise = manager.loadAsync(pluginId, 'bad-url.js');
+
+      const script = document.head.querySelector(`script[id="${ pluginId }"]`);
+
+      // Trigger error
+      script.onerror({ target: { src: 'bad-url.js' } });
+
+      await expect(loadPromise).rejects.toThrow('Failed to load script');
+    });
+  });
+});

package/core/extension-manager-impl.js

@@ -6,6 +6,8 @@ import { UI_PLUGIN_BASE_URL } from '@shell/config/uiplugins';
 import { ExtensionPoint } from './types';
 import { addLinkInterceptor, removeLinkInterceptor } from '@shell/plugins/clean-html';
 
+export const DEVELOPER_LOAD_NAME_SUFFIX = '-developer-load';
+
 let extensionManagerInstance;
 
 const createExtensionManager = (context) => {
@@ -35,11 +37,11 @@ const createExtensionManager = (context) => {
    */
   function instantiateModelExtension($plugin, clz) {
     const context = {
-      dispatch: store.dispatch,
-      getters:  store.getters,
-      t:        store.getters['i18n/t'],
+      dispatch:   store.dispatch,
+      getters:    store.getters,
+      t:          store.getters['i18n/t'],
       $axios,
-      $plugin,
+      $extension: $plugin,
     };
 
     return new clz(context);
@@ -63,9 +65,18 @@ const createExtensionManager = (context) => {
     // Load a plugin from a UI package
     loadPluginAsync(plugin) {
       const { name, version } = plugin;
-      const id = `${ name }-${ version }`;
+      let id = `${ name }-${ version }`;
       let url;
 
+      // for a developer load, we need to remove the suffix applied
+      // otherwise the extension won't load correctly
+      // but with this at least we won't hit developer loaded cards find charts
+      // when they aren't supposed to
+      if (id.includes(DEVELOPER_LOAD_NAME_SUFFIX)) {
+        id = id.replace(DEVELOPER_LOAD_NAME_SUFFIX, '');
+      }
+
+      // this is where a developer load hits (direct=true, developer=true)
       if (plugin?.metadata?.direct === 'true') {
         url = plugin.endpoint;
       } else {
@@ -455,7 +466,13 @@ const createExtensionManager = (context) => {
         try {
           const provisioner = context.$extension.getDynamic('provisioner', name);
 
-          return new provisioner({ ...context });
+          const defaults = {
+            isCreate: false,
+            isEdit:   false,
+            isView:   false
+          };
+
+          return new provisioner({ ...defaults, ...context });
         } catch (e) {
           console.error('Error loading provisioner(s) from extensions', e); // eslint-disable-line no-console
         }

package/core/plugin-helpers.ts

@@ -195,6 +195,8 @@ export function getApplicableExtensionEnhancements<T>(
                 if (i < keyboardCombo.length - 1) {
                   if (key === 'meta') {
                     key = '\u2318';
+                  } else if (isMac && key === 'alt') {
+                    key = '⌥';
                   } else {
                     key = ucFirst(key);
                   }

package/core/types-provisioning.ts

@@ -63,7 +63,7 @@ export interface ClusterProvisionerContext {
   /**
    * Definition of the extension
    */
-  $plugin: any,
+  $extension: any,
   /**
    * Function to retrieve a localised string
    */
@@ -158,6 +158,9 @@ export interface IClusterProvisioner {
    */
   hideCreate?: boolean
 
+  /** Is extension Prime-only */
+  prime?: boolean
+
   /**
    * Also show the provider card in the cluster importing flow
    * If not set, the card will only be shown in the cluster creation page

package/detail/pod.vue

@@ -97,6 +97,7 @@ export default {
 
         return {
           ...container,
+          kind:             'Container',
           status:           status || {},
           stateDisplay:     status ? this.value.containerStateDisplay(status) : undefined,
           stateBackground:  status ? this.value.containerStateColor(status).replace('text', 'bg') : undefined,

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

@@ -33,6 +33,8 @@ import { isAlternate } from '@shell/utils/platform';
 import DetailPage from '@shell/components/Resource/Detail/Page.vue';
 import Masthead from '@shell/components/Resource/Detail/Masthead/index.vue';
 import { useDefaultMastheadProps } from '@shell/components/Resource/Detail/Masthead/composable';
+import AutoscalerTab from '@shell/components/AutoscalerTab.vue';
+import { isAutoscalerFeatureFlagEnabled } from '@shell/utils/autoscaler-utils';
 
 let lastId = 1;
 const ansiup = new AnsiUp();
@@ -62,6 +64,7 @@ export default {
   emits: ['input'],
 
   components: {
+    AutoscalerTab,
     Banner,
     ResourceTable,
     ResourceTabs,
@@ -575,6 +578,7 @@ export default {
       // Hosted kubernetes providers with private endpoints need the registration tab
       // https://github.com/rancher/dashboard/issues/6036
       // https://github.com/rancher/dashboard/issues/4545
+
       if ( this.value.isHostedKubernetesProvider && this.value.isPrivateHostedProvider && !this.isClusterReady ) {
         return this.extDetailTabs.registration;
       }
@@ -620,6 +624,10 @@ export default {
 
     extDetailTabsConditions() {
       return this.extDetailTabs?.conditions;
+    },
+
+    showAutoScalerTab() {
+      return isAutoscalerFeatureFlagEnabled(this.$store) && this.value.hasAccessToAutoscalerConfigMap;
     }
   },
 
@@ -870,7 +878,7 @@ export default {
                     </div>
                   </div>
                   <div
-                    v-if="group.ref"
+                    v-if="group.ref && !group.ref.isAutoscalerEnabled"
                     class="right group-header-buttons mr-20"
                   >
                     <MachineSummaryGraph
@@ -1119,6 +1127,10 @@ export default {
               </template>
             </SortableTable>
           </Tab>
+          <AutoscalerTab
+            v-if="showAutoScalerTab"
+            :value="value"
+          />
         </ResourceTabs>
       </div>
     </template>