@rancher/shell 3.0.10 → 3.0.12-rc.1

package/core/plugin.ts

@@ -19,12 +19,20 @@ import {
   PaginationTableColumn,
   ExtensionEnvironment,
   ServerSidePaginationExtensionConfig,
-  TableAction
+  TableAction,
 } from './types';
+import {
+  ProductMetadata,
+  ProductSinglePage,
+  ProductChild,
+  StandardProductName,
+  RouteRecordRawWithParams
+} from './plugin-types';
 import coreStore, { coreStoreModule, coreStoreState } from '@shell/plugins/dashboard-store';
 import { defineAsyncComponent, markRaw, Component } from 'vue';
 import { getVersionData, CURRENT_RANCHER_VERSION } from '@shell/config/version';
 import { ExtensionManagerTypes } from '@shell/types/extension-manager';
+import { PluginProduct } from './plugin-products';
 
 /** Registration IDs used for different extension points in the extensions catalog */
 export const EXT_IDS = {
@@ -42,18 +50,20 @@ export type ProductFunction = (plugin: IPlugin, store: any) => void;
 export class Plugin implements IPlugin {
   public id: string;
   public name: string;
+  public topLevelProduct = false;
   public types: ExtensionManagerTypes = {};
   public l10n: { [key: string]: Function[] } = {};
   public modelExtensions: { [key: string]: Function[] } = {};
   public locales: { locale: string, label: string}[] = [];
   public products: ProductFunction[] = [];
   public productNames: string[] = [];
-  public routes: { parent?: string, route: RouteRecordRaw }[] = [];
+  public routes: { parent?: string, route: RouteRecordRaw | RouteRecordRawWithParams }[] = [];
   public stores: { storeName: string, register: RegisterStore, unregister: UnregisterStore }[] = [];
   public onEnter: OnNavToPackage = () => Promise.resolve();
   public onLeave: OnNavAwayFromPackage = () => Promise.resolve();
   public _onLogOut: OnLogOut = () => Promise.resolve();
   public onLogIn: OnLogIn = () => Promise.resolve();
+  public productConfigs: PluginProduct[] = [];
 
   public uiConfig: { [key: string]: any } = {};
 
@@ -110,7 +120,12 @@ export class Plugin implements IPlugin {
     this._validators = vals;
   }
 
+  _registerTopLevelProduct() {
+    this.topLevelProduct = true;
+  }
+
   // Track which products the plugin creates
+  // Legacy DSL method
   DSL(store: any, productName: string) {
     const storeDSL = STORE_DSL(store, productName);
 
@@ -119,8 +134,28 @@ export class Plugin implements IPlugin {
     return storeDSL;
   }
 
-  addProduct(product: ProductFunction): void {
-    this.products.push(product);
+  addProduct(product: ProductFunction | ProductMetadata | ProductSinglePage | string, config?: ProductChild[]): void {
+    if (typeof product === 'string') {
+      this.productConfigs.push(PluginProduct.fromName(this, product));
+    } else if (product?.name) {
+      if (!config) {
+        const p = product as ProductSinglePage;
+
+        this.productConfigs.push(new PluginProduct(this, p, []));
+      } else {
+        const p = product as ProductMetadata;
+
+        this.productConfigs.push(new PluginProduct(this, p, config));
+      }
+    } else {
+      this.products.push(product as ProductFunction);
+    }
+  }
+
+  extendProduct(product: StandardProductName | string, config: ProductChild[] | ProductChild): void {
+    const arrayConfig = Array.isArray(config) ? config : [config];
+
+    this.productConfigs.push(new PluginProduct(this, product, arrayConfig));
   }
 
   addLocale(locale: string, label: string): void {
@@ -131,8 +166,8 @@ export class Plugin implements IPlugin {
     this.register('l10n', locale, fn);
   }
 
-  addRoutes(routes: PluginRouteRecordRaw[] | RouteRecordRaw[]) {
-    routes.forEach((r: PluginRouteRecordRaw | RouteRecordRaw) => {
+  addRoutes(routes: PluginRouteRecordRaw[] | RouteRecordRawWithParams[] | RouteRecordRaw[]) {
+    routes.forEach((r: PluginRouteRecordRaw | RouteRecordRawWithParams | RouteRecordRaw) => {
       if (Object.keys(r).includes('parent')) {
         const pConfig = r as PluginRouteRecordRaw;
 
@@ -142,16 +177,16 @@ export class Plugin implements IPlugin {
           this.addRoute(pConfig.route);
         }
       } else {
-        this.addRoute(r as RouteRecordRaw);
+        this.addRoute(r as RouteRecordRaw | RouteRecordRawWithParams);
       }
     });
   }
 
-  addRoute(parentOrRoute: RouteRecordRaw | string, optionalRoute?: RouteRecordRaw): void {
+  addRoute(parentOrRoute: RouteRecordRaw | RouteRecordRawWithParams | string, optionalRoute?: RouteRecordRaw | RouteRecordRawWithParams): void {
     // Always add the pkg name to the route metadata
     const hasParent = typeof (parentOrRoute) === 'string';
     const parent: string | undefined = hasParent ? parentOrRoute as string : undefined;
-    const route: RouteRecordRaw = hasParent ? optionalRoute as RouteRecordRaw : parentOrRoute as RouteRecordRaw;
+    const route: RouteRecordRaw | RouteRecordRawWithParams = hasParent ? (optionalRoute as RouteRecordRaw | RouteRecordRawWithParams) : parentOrRoute as RouteRecordRaw | RouteRecordRawWithParams;
 
     let parentOverride;
 
@@ -390,7 +425,7 @@ export class Plugin implements IPlugin {
     const allowPaths = ['models', 'image'];
     const nparts = name.split('/');
 
-    // Support components in a sub-folder - component_name/index.vue (and ignore other componnets in that folder)
+    // Support components in a sub-folder - component_name/index.vue (and ignore other components in that folder)
     // Allow store-scoped models via sub-folder - pkgname/models/storename/type will be registered as storename/type to avoid overwriting shell/models/type
     if (nparts.length === 2 && !allowPaths.includes(type)) {
       if (nparts[1] !== 'index') {

package/core/productDebugger.js

@@ -0,0 +1,48 @@
+
+export function DSLRegistrationsPerProduct(store, prodName) {
+  const parsedData = {};
+  const typeMapData = store._state.data['type-map'];
+
+  const relevantKeys = [
+    'basicGroupWeights',
+    'basicTypeWeights',
+    'groupDefaultTypes',
+    'groupLabels',
+    // 'headers',
+    // 'spoofedTypes',
+    // 'typeOptions',
+    // 'typeWeights'
+  ];
+
+  Object.keys(typeMapData).forEach((dataType) => {
+    // prod reg
+    if (dataType === 'products' && typeMapData[dataType].filter((item) => item.name === prodName)) {
+      parsedData[dataType] = typeMapData[dataType].filter((item) => item.name === prodName);
+    }
+
+    // prod configureType
+    if (dataType === 'typeOptions' && typeMapData[dataType].filter((item) => item.customRoute && item.customRoute.name.includes(prodName))) {
+      parsedData['configureType'] = typeMapData[dataType].filter((item) => item.customRoute && item.customRoute.name.includes(prodName));
+    }
+
+    // other types which map with prodName
+    if (typeMapData[dataType]?.[prodName]) {
+      parsedData[dataType] = typeMapData[dataType]?.[prodName];
+    }
+
+    // other relevant data
+    if (relevantKeys.includes(dataType)) {
+      parsedData[dataType] = typeMapData[dataType];
+    }
+  });
+
+  console.error('*** PRODUCT DATA DEBUGGER **** DSLRegistrationsPerProduct', parsedData); // eslint-disable-line no-console
+}
+
+export function registeredRoutes(store, prodName) {
+  const routes = store.$router.getRoutes();
+
+  const parsedData = routes.filter((route) => route.path.includes(prodName));
+
+  console.error('*** PRODUCT DATA DEBUGGER **** registeredRoutes', parsedData); // eslint-disable-line no-console
+}

package/core/types.ts

@@ -2,6 +2,11 @@ import { ProductFunction } from './plugin';
 import { RouteRecordRaw } from 'vue-router';
 import type { ExtensionManager } from '@shell/types/extension-manager';
 import { PaginationSettingsStores } from '@shell/types/resources/settings';
+import type {
+  ProductMetadata, ProductSinglePage,
+  StandardProductName, RouteRecordRawWithParams, ProductChildGroup,
+  ProductChildPage
+} from './plugin-types';
 
 // Cluster Provisioning types
 export * from './types-provisioning';
@@ -21,6 +26,8 @@ export interface PackageMetadata {
 //   children: Route[];
 // }
 
+export type PluginRouteRecordRaw = { [key: string]: any }
+
 export type VuexStoreObject = { [key: string]: any }
 export type CoreStoreSpecifics = { state: () => VuexStoreObject, getters: VuexStoreObject, mutations: VuexStoreObject, actions: VuexStoreObject }
 export type CoreStoreConfig = { namespace: string, baseUrl?: string, modelBaseClass?: string, supportsStream?: boolean, isClusterStore?: boolean }
@@ -28,8 +35,6 @@ export type CoreStoreInit = (store: any, ctx: any) => void;
 export type RegisterStore = () => (store: any) => void
 export type UnregisterStore = (store: any) => void
 
-export type PluginRouteRecordRaw = { [key: string]: any }
-
 export type OnEnterLeavePackageConfig = {
   clusterId: string,
   product: string,
@@ -265,6 +270,11 @@ export interface ProductOptions {
    */
   showClusterSwitcher?: boolean;
 
+  /**
+   * Indicates whether UI Extensions can add pages to this product
+   */
+  extendable?: boolean;
+
   /**
    * Show the namespace filter in the header
    */
@@ -290,6 +300,18 @@ export interface ProductOptions {
    */
   name?: string;
 
+  /**
+   *
+   */
+  label?: string;
+
+  labelKey?: string;
+
+  iconHeader?: string;
+
+  // Do not use - internal use only
+  version?: number;
+
   /**
    * Leaving these here for completeness but I don't think these should be advertised as useable to plugin creators.
    */
@@ -368,6 +390,17 @@ export interface HeaderOptions {
  */
 export type PaginationHeaderOptions = Omit<HeaderOptions, 'getValue'>
 
+export type ResourceTypeConfig = {
+  options?: {
+    isCreatable?: boolean;
+    isEditable?: boolean;
+  },
+  listHeaders?: {
+    legacy?: HeaderOptions[];
+    paginated?: PaginationHeaderOptions[];
+  }
+};
+
 /**
  * External extension configuration for @HeaderOptions
  */
@@ -489,9 +522,11 @@ export interface ConfigureVirtualTypeOptions extends ConfigureTypeOptions {
   name: string;
 
   /**
-   * The route that this type should correspond to {@link PluginRouteRecordRaw} {@link RouteRecordRaw}
+   * The route that this type should correspond to {@link PluginRouteRecordRaw} {@link RouteRecordRaw} {@link RouteRecordRawWithParams}
    */
-  route: PluginRouteRecordRaw | RouteRecordRaw | Object;
+  route: PluginRouteRecordRaw | RouteRecordRaw | RouteRecordRawWithParams | Object;
+
+  weight?: number;
 }
 
 export interface DSLReturnType {
@@ -501,7 +536,7 @@ export interface DSLReturnType {
    * @param group Conditionally a group you want to places all the types in
    * @returns {@link void}
    */
-  basicType: (types: string[], group?: string) => void;
+  basicType: (types: string[] | string, group?: string) => void;
 
   /**
    * Configure a myriad of options for the specified type
@@ -572,6 +607,10 @@ export interface DSLReturnType {
   // moveType: (match, group)
   // setGroupDefaultType: (input, defaultType)
   // spoofedType: (obj)
+
+  labelGroup: (group: string, label: string | undefined, labelKey?: string) => void;
+
+  setGroupDefaultType: (group: string, defaultType: string) => void;
 }
 
 /**
@@ -610,15 +649,53 @@ export type ModelExtensionContext = {
 export type ModelExtensionConstructor = (context: ModelExtensionContext) => Object;
 
 /**
- * Interface for a Dashboard plugin
+ * Interface for a UI Extension
  */
-export interface IPlugin {
+export interface IExtension {
+  /**
+   * Register a top-level product as a flag on the plugin
+   * @internal - DO NOT USE - Internal API only
+   */
+  _registerTopLevelProduct(): void;
+
+  /**
+   * Add a product to the sidebar, with children and a side menu for navigation for internal pages
+   * @param name
+   * @param config
+   */
+  addProduct(product: ProductMetadata, config: ProductChildGroup[]): void;
+  addProduct(product: ProductMetadata, config: ProductChildPage[]): void;
+
+  /**
+   * Add a product to the sidebar, without children (no side menu, single page only)
+   * @param product
+   */
+  addProduct(product: ProductSinglePage): void;
+
   /**
-   * Add a product
+   * Add a product with just a name (convenience/bridge method for quick setup).
+   * Creates a basic product with an empty page component automatically.
+   * This is useful for getting started quickly - expand to the full API once you're ready to add custom pages.
+   * @param productName Simple product name - will be used as both the name and label
+   */
+  addProduct(productName: string): void;
+
+  /**
+   * Add a product to the sidebar (deprecated, use other signatures of addProduct instead)
+   * @deprecated Use other `addProduct` signatures instead
    * @param importFn Function that will import the module containing a product definition
    */
   addProduct(importFn: ProductFunction): void;
 
+  /**
+   * Extend an existing product in Rancher, with children and a side menu for navigation for internal pages
+   *
+   * @param product Product to be extended
+   * @param config Product extension configuration
+   */
+  extendProduct(product: StandardProductName | string, config: ProductChildGroup[]): void;
+  extendProduct(product: StandardProductName | string, config: ProductChildPage[]): void;
+
   /**
    * Add a locale to the i18n store
    * @param locale Locale id (e.g. en-us)
@@ -644,8 +721,8 @@ export interface IPlugin {
   /**
    * Add a route to the Vue Router
    */
-  addRoute(route: RouteRecordRaw): void;
-  addRoute(parent: string, route: RouteRecordRaw): void;
+  addRoute(route: RouteRecordRawWithParams | RouteRecordRaw): void;
+  addRoute(parent: string, route: RouteRecordRawWithParams | RouteRecordRaw): void;
 
   /**
    * Adds an action/button to the UI
@@ -698,7 +775,7 @@ export interface IPlugin {
   /**
    * Add routes to the Vue Router
    */
-  addRoutes(routes: PluginRouteRecordRaw[] | RouteRecordRaw[]): void;
+  addRoutes(routes: PluginRouteRecordRaw[] | RouteRecordRawWithParams[] | RouteRecordRaw[]): void;
 
    /**
     * Add a hook to be called when the plugin is uninstalled
@@ -755,6 +832,7 @@ export interface IPlugin {
 
   /**
    * Will return all of the configuration functions used for creating a new product.
+   * @deprecated Should use `addProduct` and `extendProduct` instead and avoid using this directly
    * @param store The store that was passed to the function that's passed to `plugin.addProduct(function)`
    * @param productName The name of the new product. This name is displayed in the navigation.
    */
@@ -766,6 +844,12 @@ export interface IPlugin {
   get environment(): ExtensionEnvironment;
 }
 
+/**
+ * Legacy interface for a plugin, which is just an extension but with the `DSL` function.
+ * @deprecated Should use `IExtension` interface instead
+ */
+export type IPlugin = IExtension;
+
 // Internal interface
 // Built-in extensions may use this, but external extensions should not, as this is subject to change
 // Defined as any for now

package/detail/__tests__/__snapshots__/fleet.cattle.io.bundle.test.ts.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`view: fleet.cattle.io.bundle should render resources when bundle deployments exist 1`] = `
+<div class="tabbed-container resource-tabs view" data-testid="tabbed">
+  <ul role="tablist" class="tabs clearfix horizontal" data-testid="tabbed-block" tabindex="0">
+    <!-- This is the tabs link... tabs appear here because they are injected from the "Tab" component -->
+    <li id="resources" data-testid="resources" class="tab active"><a id="tab-resources" data-testid="btn-resources" aria-controls="resources" aria-selected="true" aria-label="Resources" role="tab" tabindex="0">
+        <!--v-if--><span>Resources</span>
+        <!--v-if-->
+        <!--v-if-->
+      </a></li>
+    <!--v-if-->
+    <!--v-if-->
+  </ul>
+  <div class="tab-container">
+    <!-- This is where "normal" tab content goes... -->
+    <section id="resources" aria-hidden="false" role="tabpanel" aria-labelledby="tab-resources" style="">
+      <!--v-if-->
+      <resource-table-stub rows="[object Object],[object Object]" loading="false" altloading="false" keyfield="tableKey" headers="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" search="true" tableactions="false" paginglabel="sortableTable.paging.resource" rowactions="false" groupoptions="[object Object],[object Object]" groupdefault="namespace" grouptooltip="resourceTable.groupBy.namespace" overflowx="false" overflowy="false" ignorefilter="false" hasadvancedfiltering="false" advfilterhidelabelsascols="false" advfilterpreventfilteringlabels="false" usequeryparamsforsimplefiltering="false" forceupdateliveanddelayed="0" externalpaginationenabled="false" default-sort-by="state"></resource-table-stub>
+    </section>
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+    <!-- Extension tabs content goes here... -->
+  </div>
+</div>
+`;
+
+exports[`view: fleet.cattle.io.bundle should render the bundle detail page 1`] = `<resource-tabs-stub mode="view" needconditions="true" needevents="true" needrelated="false" usehash="true" value="[object Object]"></resource-tabs-stub>`;
+
+exports[`view: fleet.cattle.io.bundle should render the bundle detail page with full mount 1`] = `
+<div class="tabbed-container resource-tabs view" data-testid="tabbed">
+  <ul role="tablist" class="tabs clearfix horizontal" data-testid="tabbed-block" tabindex="0">
+    <!-- This is the tabs link... tabs appear here because they are injected from the "Tab" component -->
+    <!--v-if-->
+    <!--v-if-->
+  </ul>
+  <div class="">
+    <!-- This is where "normal" tab content goes... -->
+    <section id="resources" aria-hidden="true" role="tabpanel" aria-labelledby="tab-resources" style="display: none;">
+      <!--v-if-->
+      <resource-table-stub rows="" loading="false" altloading="false" keyfield="tableKey" headers="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" search="true" tableactions="false" paginglabel="sortableTable.paging.resource" rowactions="false" groupoptions="[object Object],[object Object]" groupdefault="namespace" grouptooltip="resourceTable.groupBy.namespace" overflowx="false" overflowy="false" ignorefilter="false" hasadvancedfiltering="false" advfilterhidelabelsascols="false" advfilterpreventfilteringlabels="false" usequeryparamsforsimplefiltering="false" forceupdateliveanddelayed="0" externalpaginationenabled="false" default-sort-by="state"></resource-table-stub>
+    </section>
+    <!--v-if-->
+    <!--v-if-->
+    <!--v-if-->
+    <!-- Extension tabs content goes here... -->
+  </div>
+</div>
+`;
+
+exports[`view: fleet.cattle.io.bundle should show Loading when fetch is pending 1`] = `<loading-stub loading="true" mode="content" nodelay="false"></loading-stub>`;

package/detail/__tests__/fleet.cattle.io.bundle.test.ts

@@ -0,0 +1,171 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import BundleDetail from '@shell/detail/fleet.cattle.io.bundle.vue';
+
+describe('view: fleet.cattle.io.bundle', () => {
+  const mockStore = {
+    getters: {
+      'i18n/t':                        (text: string) => text,
+      'i18n/exists':                   jest.fn(),
+      currentStore:                    () => 'management',
+      'management/schemaFor':          jest.fn(),
+      'management/all':                () => [],
+      'management/pathExistsInSchema': () => false,
+      'type-map/optionsFor':           () => ({}),
+      'type-map/headersFor':           () => [],
+      'cluster/schemaFor':             jest.fn(),
+      'resource-fetch/refreshFlag':    () => false,
+    },
+    dispatch: jest.fn(),
+  };
+
+  const mockValue = {
+    id:       'fleet-default/test-bundle',
+    type:     'fleet.cattle.io.bundle',
+    metadata: {
+      name:      'test-bundle',
+      namespace: 'fleet-default',
+      labels:    {},
+    },
+    spec:           { targets: [] },
+    status:         { conditions: [] },
+    targetClusters: [],
+  };
+
+  const mockValueWithResources = {
+    id:       'fleet-default/test-bundle',
+    type:     'fleet.cattle.io.bundle',
+    metadata: {
+      name:      'test-bundle',
+      namespace: 'fleet-default',
+      labels:    {},
+    },
+    spec:   { targets: [] },
+    status: {
+      conditions: [
+        {
+          type:   'Ready',
+          status: 'True',
+        }
+      ]
+    },
+    targetClusters: [
+      {
+        id:          'fleet-default/cluster-1',
+        nameDisplay: 'cluster-1',
+        metadata:    { labels: { 'management.cattle.io/cluster-name': 'c-m-abc123' } },
+      },
+    ],
+  };
+
+  const mockBundleDeployments = [
+    {
+      metadata: {
+        labels: {
+          'fleet.cattle.io/bundle-namespace':  'fleet-default',
+          'fleet.cattle.io/bundle-name':       'test-bundle',
+          'fleet.cattle.io/cluster-namespace': 'fleet-default',
+          'fleet.cattle.io/cluster':           'cluster-1',
+        },
+      },
+      status: {
+        resources: [
+          {
+            kind:       'Deployment',
+            apiVersion: 'apps/v1',
+            namespace:  'default',
+            name:       'nginx',
+          },
+          {
+            kind:       'Service',
+            apiVersion: 'v1',
+            namespace:  'default',
+            name:       'nginx-svc',
+          },
+        ],
+      },
+    },
+  ];
+
+  const fullMountGlobal = {
+    mocks: {
+      $store:      mockStore,
+      $fetchState: { pending: false },
+      $route:      { query: {}, hash: '' },
+      $router:     {
+        applyQuery:   jest.fn(),
+        replace:      jest.fn(),
+        currentRoute: { _value: { hash: '' } },
+      },
+    },
+    stubs: {
+      ResourceTable: true,
+      teleport:      true,
+    },
+  };
+
+  const createWrapper = (props = {}) => {
+    return shallowMount(BundleDetail, {
+      props: {
+        value: mockValue,
+        ...props,
+      },
+      global: {
+        mocks: {
+          $store:      mockStore,
+          $fetchState: { pending: false },
+          $route:      { query: {} },
+          $router:     { applyQuery: jest.fn() },
+        },
+      },
+    });
+  };
+
+  it('should render the bundle detail page', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render the bundle detail page with full mount', () => {
+    const wrapper = mount(BundleDetail, {
+      props:  { value: mockValue },
+      global: fullMountGlobal,
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should show Loading when fetch is pending', () => {
+    const wrapper = shallowMount(BundleDetail, {
+      props:  { value: mockValue },
+      global: {
+        mocks: {
+          $store:      mockStore,
+          $fetchState: { pending: true },
+          $route:      { query: {} },
+          $router:     { applyQuery: jest.fn() },
+        },
+      },
+    });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('should render resources when bundle deployments exist', async() => {
+    const wrapper = mount(BundleDetail, {
+      props:  { value: mockValueWithResources },
+      global: fullMountGlobal,
+    });
+
+    // Simulate fetch completion by setting allBundleDeployments
+    (wrapper.vm as any).allBundleDeployments = mockBundleDeployments;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.html()).toMatchSnapshot();
+
+    // Verify computed bundleResources are populated
+    expect((wrapper.vm as any).bundleResources).toHaveLength(2);
+    expect((wrapper.vm as any).bundleResources[0].name).toBe('nginx');
+    expect((wrapper.vm as any).bundleResources[1].name).toBe('nginx-svc');
+  });
+});

package/detail/__tests__/node.test.ts

@@ -0,0 +1,83 @@
+import { shallowMount } from '@vue/test-utils';
+import node from '@shell/detail/node.vue';
+import ConsumptionGauge from '@shell/components/ConsumptionGauge.vue';
+
+describe('view: node detail', () => {
+  const mockStore = {
+    getters: {
+      'cluster/schemaFor':         () => undefined,
+      'cluster/paginationEnabled': () => false,
+      'type-map/headersFor':       jest.fn(),
+      'i18n/t':                    (key: string) => key,
+      currentCluster:              { id: 'local' },
+    },
+    dispatch: jest.fn(),
+  };
+
+  const mocks = {
+    $store:      mockStore,
+    $fetchState: { pending: false },
+  };
+
+  const defaultNodeValue = {
+    metadata: { name: 'test-node' },
+    status:   {
+      nodeInfo: {}, images: [], conditions: []
+    },
+    spec:               { taints: [] },
+    pods:               [],
+    cpuCapacity:        4,
+    cpuUsage:           2,
+    ramReserved:        8000,
+    ramUsage:           4000,
+    podCapacity:        110,
+    podConsumed:        5,
+    isPidPressureOk:    true,
+    isDiskPressureOk:   true,
+    isMemoryPressureOk: true,
+    isKubeletOk:        true,
+    internalIp:         '10.0.0.1',
+  };
+
+  function createWrapper(nodeOverrides = {}) {
+    return shallowMount(node, {
+      props:  { value: { ...defaultNodeValue, ...nodeOverrides } },
+      global: { mocks },
+    });
+  }
+
+  function findGaugeByResource(wrapper: ReturnType<typeof createWrapper>, resourceKey: string) {
+    const gauges = wrapper.findAllComponents(ConsumptionGauge);
+
+    return gauges.find(
+      (g) => g.attributes('resourcename')?.includes(resourceKey)
+    );
+  }
+
+  it('should pass the "running" translation key as usedlabel to the pods ConsumptionGauge', () => {
+    const wrapper = createWrapper();
+
+    const podsGauge = findGaugeByResource(wrapper, 'consumptionGauge.pods');
+
+    expect(podsGauge).toBeDefined();
+    expect(podsGauge!.attributes('usedlabel')).toContain('consumptionGauge.running');
+  });
+
+  it('should NOT pass a usedlabel to the CPU ConsumptionGauge', () => {
+    const wrapper = createWrapper();
+
+    const cpuGauge = findGaugeByResource(wrapper, 'consumptionGauge.cpu');
+
+    expect(cpuGauge).toBeDefined();
+    expect(cpuGauge!.attributes('usedlabel')).toBeUndefined();
+  });
+
+  it('should NOT pass a usedlabel to the Memory ConsumptionGauge', () => {
+    const wrapper = createWrapper();
+
+    const memoryGauge = findGaugeByResource(wrapper, 'consumptionGauge.memory');
+
+    expect(memoryGauge).toBeDefined();
+    expect(memoryGauge!.attributes('usedlabel')).toBeUndefined();
+  });
+});